From 7f6029ff9f49f62858581c7255cfeae90b12dff2 Mon Sep 17 00:00:00 2001
From: Manuel <moeri@puzzle.ch>
Date: Fri, 15 Nov 2024 16:07:23 +0100
Subject: [PATCH] Restore styles.scss and delete the right file this time

---
 frontend/src/style/styles.scss | 400 +++++++++++++++++++++++++++++++++
 frontend/src/style/test.css    | 130 -----------
 2 files changed, 400 insertions(+), 130 deletions(-)
 create mode 100644 frontend/src/style/styles.scss
 delete mode 100644 frontend/src/style/test.css

diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
new file mode 100644
index 0000000000..6ebff4ac77
--- /dev/null
+++ b/frontend/src/style/styles.scss
@@ -0,0 +1,400 @@
+@import "custom_angular";
+@import "_variables";
+@import "custom_bootstrap";
+@import "fonts/Roboto";
+@import "fonts/MaterialIcons";
+
+html,
+body.okr {
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: $overview-bg;
+  font-family: Roboto, sans-serif;
+  --bs-body-font-family: Roboto, "Helvetica Neue", sans-serif;
+
+  h1 {
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
+
+  h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    word-wrap: anywhere;
+    @extend .linebreak;
+    margin-bottom: 0;
+  }
+
+  h3 {
+    font-size: 1rem;
+    font-weight: 600;
+    word-wrap: anywhere;
+    margin-bottom: 0;
+  }
+
+  h4 {
+    font-size: 0.875rem;
+    font-weight: 400;
+    margin-bottom: 0;
+  }
+
+  h5 {
+    font-size: 0.875rem;
+    margin-bottom: 0;
+    font-weight: 400;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
+
+  span {
+    font-size: 14px;
+  }
+
+  .quarter-filter-text span {
+    font-size: 16px;
+  }
+
+  a {
+    color: $pz-dark-blue;
+    text-decoration: none;
+    font-size: 0.875rem;
+    font-weight: 700;
+  }
+
+  .font-size-14 {
+    font-size: 0.875rem;
+  }
+}
+
+.linebreak {
+  white-space: pre-wrap;
+}
+
+.fit-content {
+  width: fit-content;
+}
+
+.keyResult-attribute-show {
+  background-color: $keyResult-attribute-bg;
+  padding: 0.25em 0.75rem;
+  border-radius: 2px;
+}
+
+.keyResult-attribute-edit {
+  @extend .keyResult-attribute-show;
+  border: solid $keyResult-attribute-edit-border 1px;
+}
+
+.dialog-data-show {
+  @extend .okr-form-label;
+  @extend .linebreak;
+  @extend .bg-display-element;
+  @extend .fs-6;
+  @extend .fw-normal;
+  @extend .px-2;
+  @extend .py-1;
+}
+
+.bg-grey {
+  background-color: $overview-bg;
+}
+
+body pzsh-backdrop {
+  display: none;
+}
+
+.text-small {
+  font-size: 1rem;
+}
+
+@media screen and (max-width: 580px) {
+  .text-small {
+    font-size: 0.8rem;
+  }
+}
+
+.disable-scrolling {
+  overflow-y: hidden;
+}
+
+.panel {
+  max-width: 800px;
+  @extend .col-md-12;
+}
+
+.backdrop {
+  margin-top: $top-bar-height;
+}
+
+input textarea {
+  outline-color: #909090;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.icon-button {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
+.mat-mdc-form-field-error {
+  color: $error-color;
+}
+
+textarea,
+input:not([type]),
+input[type="text"] {
+  @extend .ps-1;
+}
+
+.dialog-form-field {
+  width: 100%;
+  padding: 0.437rem 0.625rem 0.375rem 0.625rem !important;
+}
+
+.big-dialog-form-field {
+  @extend .dialog-form-field;
+  height: 4.375rem !important;
+}
+
+.mat-mdc-checkbox .mdc-form-field {
+  font-size: 1rem !important;
+}
+
+.dialog-form-field-error {
+  resize: none;
+  outline: $error-color 2px solid !important;
+  outline-offset: -2px;
+}
+
+.custom-select {
+  border: solid 1px #909090;
+  @extend .dialog-form-field;
+  cursor: pointer;
+  height: 1.18rem;
+  box-sizing: content-box;
+}
+
+input:focus,
+textarea:focus,
+select:focus,
+mat-checkbox:focus,
+mat-chip:focus,
+mat-radio-button:focus,
+app-objective-column:focus,
+app-keyresult:focus,
+.focus-outline:focus {
+  outline: $pz-dark-blue solid 2px;
+}
+
+select,
+textarea,
+input {
+  outline-offset: -2px;
+}
+
+.bg-inherit {
+  background-color: inherit;
+}
+
+.border-error {
+  border: 1px solid $error;
+}
+
+.dialog-padding {
+  padding: 0 1.62rem 0 1.62rem !important;
+}
+
+.objective-three-dot-menu {
+  border-radius: 0.5rem !important;
+  .mat-mdc-menu-content {
+    padding: 0 !important;
+  }
+}
+
+.select-style .mat-mdc-select-value-text {
+  margin-left: 0.5rem !important;
+}
+
+.dialog-detail-button {
+  margin-left: -8px;
+}
+
+mat-form-field.quarter-filter .mat-mdc-text-field-wrapper {
+  width: 220px;
+}
+
+.input-style {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+}
+
+.sub-title-keyresult {
+  font-size: 0.9rem !important;
+}
+
+* {
+  line-height: 115% !important;
+}
+
+img.add-cross-button {
+  width: 0.65rem;
+  margin: 0 6px 1px 9px;
+}
+
+.add-text {
+  margin-top: 1px;
+  height: 2rem;
+}
+
+.align-new-icon {
+  margin-left: -10px;
+}
+
+.team-header {
+  @include media-breakpoint-down(sm) {
+    padding-left: 22px;
+  }
+}
+
+.h-0 {
+  height: 0;
+}
+
+.h-fit {
+  height: fit-content;
+}
+
+.break-word {
+  word-break: break-all;
+}
+
+#okrBanner {
+  position: fixed;
+  width: 100%;
+  height: min-content;
+  z-index: 100;
+  transition: 0.5s;
+  background-color: var(--okr-banner-background-color);
+}
+
+app-team-management-banner > #okrBanner {
+  position: relative;
+}
+
+table.okr-table {
+  border-collapse: separate;
+  border-spacing: 0 0.5rem;
+  border: none;
+  box-shadow: none;
+  tr {
+    $table-height: 40px;
+    height: $table-height;
+
+    > td {
+      height: $table-height;
+      border: none;
+      background-color: $light-grey;
+    }
+    > th {
+      vertical-align: bottom;
+      font-size: 0.75rem;
+      font-weight: bold;
+      border: none;
+      background-color: white;
+    }
+  }
+  tbody {
+    tr:hover {
+      box-shadow: 0 0 0 1px $dark-grey;
+    }
+  }
+}
+
+.search-form {
+  button {
+    border-radius: 0 4px 4px 0;
+    mat-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transform: scale(1.25);
+    }
+  }
+  .mdc-notched-outline__trailing {
+    border-bottom-right-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
+}
+
+.mat-mdc-autocomplete-panel {
+  &.autocomplete-bigger {
+    max-height: 480px;
+  }
+}
+
+@import "custom_bootstrap";
+
+.spinner-container {
+  @extend .mt-5;
+}
+
+.okr-dialog-panel {
+  margin-top: $top-bar-height;
+  max-height: calc(100vh - $top-bar-height);
+  @extend .col-12;
+}
+
+.okr-dialog-panel-default {
+  @extend .okr-dialog-panel;
+  @extend .col-sm-8;
+  @extend .col-md-6;
+  @extend .col-lg-5;
+  @extend .col-xxl-4;
+  @include media-breakpoint-down(sm) {
+    height: 100%;
+  }
+}
+
+.okr-dialog-panel-small {
+  @extend .okr-dialog-panel;
+  @extend .col-sm-8;
+  @extend .col-md-6;
+  @extend .col-lg-5;
+  @extend .col-xl-4;
+  @extend .col-xxl-3;
+}
+
+.okr-form-container {
+  @extend .container-fluid;
+}
+
+.okr-form-row {
+  @extend .row;
+}
+
+.okr-form-col {
+  @extend .col-12;
+}
+
+.okr-form-label {
+  color: black;
+  @extend .py-1;
+}
+
+// Is used to style the input fields in the OKR form globally
+.okr-form-input {
+  @extend .okr-form-col;
+}
+
+.okr-form-label-input-container {
+  @extend .py-1;
+}
diff --git a/frontend/src/style/test.css b/frontend/src/style/test.css
deleted file mode 100644
index 59878d6faf..0000000000
--- a/frontend/src/style/test.css
+++ /dev/null
@@ -1,130 +0,0 @@
-/* Custom eye 1 ---------------------------------------------------------------------------*/
-h1 {
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-
-h2 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  word-wrap: anywhere;
-  @extend .linebreak;
-  margin-bottom: 0;
-}
-
-h3 {
-  font-size: 1rem;
-  font-weight: 600;
-  word-wrap: anywhere;
-  margin-bottom: 0;
-}
-
-h4 {
-  font-size: 0.875rem;
-  font-weight: 400;
-  margin-bottom: 0;
-}
-
-h5 {
-  font-size: 0.875rem;
-  margin-bottom: 0;
-  font-weight: 400;
-}
-
-/* Custom eye 2 ---------------------------------------------------------------------------*/
-h1 {
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-h2 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  word-wrap: anywhere;
-  @extend .linebreak;
-  margin-bottom: 0;
-}
-
-h3 {
-  font-size: 1rem;
-  font-weight: 600;
-  word-wrap: anywhere;
-  margin-bottom: 0;
-}
-
-h4 {
-  font-size: 0.875rem;
-  font-weight: 400;
-  margin-bottom: 0;
-}
-
-h5 {
-  font-size: 0.875rem;
-  margin-bottom: 0;
-  font-weight: 400;
-}
-
-/*times 1.2x ---------------------------------------------------------------------------*/
-h1 {
-  font-size: 24px;
-  font-weight: 600;
-}
-
-h2 {
-  font-size: 21.6px;
-  font-weight: 600;
-  word-wrap: anywhere;
-  @extend .linebreak;
-  margin-bottom: 0;
-}
-
-h3 {
-  font-size: 19.2px;
-  word-wrap: anywhere;
-  margin-bottom: 0;
-}
-
-h4 {
-  font-size: 16.8px;
-  font-weight: 400;
-  margin-bottom: 0;
-}
-
-h5 {
-  font-size: 12px;
-  margin-bottom: 0;
-  font-weight: 400;
-}
-
-/*Ladder: 2.5px ---------------------------------------------------------------------------*/
-h1 {
-  font-size: 24px;
-  font-weight: 600;
-}
-
-h2 {
-  font-size: 21.5px;
-  font-weight: 600;
-  word-wrap: anywhere;
-  @extend .linebreak;
-  margin-bottom: 0;
-}
-
-h3 {
-  font-size: 19px;
-  font-weight: 600;
-  word-wrap: anywhere;
-  margin-bottom: 0;
-}
-
-h4 {
-  font-size: 16.5px;
-  font-weight: 400;
-  margin-bottom: 0;
-}
-
-h5 {
-  font-size: 14px;
-  font-weight: 400;
-  margin-bottom: 0;
-}