fix(styles): fixed styles

src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.ts

@@ -8,11 +8,9 @@ import { InputText } from 'primeng/inputtext';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import { SearchInputComponent } from '@osf/shared';
-
 @Component({
   selector: 'osf-create-view-link-dialog',
-  imports: [Button, SearchInputComponent, TranslatePipe, InputText, ReactiveFormsModule, FormsModule, Checkbox],
+  imports: [Button, TranslatePipe, InputText, ReactiveFormsModule, FormsModule, Checkbox],
   templateUrl: './create-view-link-dialog.component.html',
   styleUrl: './create-view-link-dialog.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/project/contributors/contributors.component.ts

@@ -7,7 +7,6 @@ import { Select } from 'primeng/select';
 import { TableModule, TablePageEvent } from 'primeng/table';
 import { Tooltip } from 'primeng/tooltip';
 
-import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, output, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
@@ -30,7 +29,6 @@ import { IS_WEB, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
     Select,
     TranslatePipe,
     FormsModule,
-    DatePipe,
     TableModule,
     ViewOnlyTableComponent,
     Tooltip,

src/assets/styles/_base.scss

@@ -0,0 +1,96 @@
+@use "assets/styles/variables" as var;
+@use "assets/styles/mixins" as mix;
+
+@layer reset, base, primeng;
+
+@layer base {
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+}
+
+@layer reset {
+  html,
+  body {
+    font-family: var.$openSans;
+    font-weight: 400;
+    font-size: var.$base-font-size;
+    max-height: 100vh;
+    max-width: 100vw;
+  }
+
+  h1 {
+    font-size: 1.7rem;
+  }
+
+  h2 {
+    font-size: 1.3rem;
+  }
+
+  h3 {
+    font-size: 1rem;
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-weight: 700;
+    text-transform: capitalize;
+    color: var.$dark-blue-1;
+  }
+
+  li {
+    list-style: none;
+  }
+
+  .inside-list {
+    li {
+      list-style: inside;
+    }
+  }
+
+  a,
+  a:visited {
+    text-decoration: none;
+    color: var.$pr-blue-1;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  i {
+    @include mix.flex-center;
+  }
+
+  button {
+    color: var.$white;
+  }
+
+  dl {
+    margin-bottom: 1.7rem;
+    padding: 0;
+  }
+
+  dt {
+    display: inline;
+    font-weight: bold;
+  }
+
+  dd {
+    margin: 0;
+    display: inline;
+
+    &::after {
+      content: "";
+      display: block;
+    }
+  }
+
+  i,
+  svg {
+    outline: none;
+  }
+}

src/assets/styles/_common.scss

@@ -1,3 +1,7 @@
+@use "assets/styles/variables" as var;
+
+// ------------------------- Custom scrollbar styles -------------------------
+
 .custom-scrollbar {
   overflow: auto;
   scrollbar-width: thin;
@@ -19,3 +23,40 @@
   border-radius: 4px;
   border: 2px solid var(--dark-blue-1);
 }
+
+// ------------------------- Highlight color -------------------------
+
+.highlight {
+  color: var.$pr-blue-1;
+}
+
+// ------------------------- Copy notification -------------------------
+
+.copy-notification {
+  position: absolute;
+  top: -45px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  white-space: nowrap;
+  border-radius: 8px;
+  box-shadow: 0 0 4px 0 #00000029;
+  background: var.$white;
+
+  &.visible {
+    opacity: 1;
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px 5px 0;
+    border-style: solid;
+    border-color: var.$grey-1 transparent transparent;
+  }
+}

src/assets/styles/_mixins.scss

@@ -1,3 +1,9 @@
+@use "assets/styles/variables" as var;
+
+@function rem($px) {
+  @return ($px / var.$base-font-size) * 1rem;
+}
+
 @mixin flex-center {
   display: flex;
   justify-content: center;

src/assets/styles/_variables.scss

@@ -2,6 +2,7 @@
 
 // Fonts
 $openSans: var(--openSans);
+$base-font-size: 14px;
 
 // Colors
 // Primary Blue

src/assets/styles/overrides/checkbox.scss

@@ -9,7 +9,7 @@
 .p-checkbox-box {
   width: 1.4rem;
   height: 1.4rem;
-  background: white;
+  background: var.$white;
   border-color: var.$grey-2;
 }
 
@@ -20,7 +20,7 @@
   }
 
   .p-checkbox-icon {
-    color: white;
+    color: var.$white;
     font-size: 1.4rem;
     width: 0.7rem;
   }

src/assets/styles/overrides/datepicker.scss

@@ -35,7 +35,7 @@
 
     &:hover {
       background: var.$pr-blue-2;
-      color: white;
+      color: var.$white;
     }
   }
 
@@ -44,12 +44,12 @@
 
     &:hover {
       background: var.$pr-blue-2;
-      color: white;
+      color: var.$white;
     }
   }
 
   .p-datepicker-today > .p-datepicker-day-selected {
     background: var.$pr-blue-1;
-    color: white;
+    color: var.$white;
   }
 }

src/assets/styles/styles.scss

@@ -1,7 +1,11 @@
 @use "primeicons/primeicons.css";
+
 @use "fonts";
 @use "variables" as var;
 @use "mixins" as mix;
+@use "common";
+@use "base";
+
 @use "./overrides/button";
 @use "./overrides/input";
 @use "./overrides/checkbox";
@@ -30,132 +34,4 @@
 @use "./overrides/menu";
 @use "./overrides/spinner";
 @use "./overrides/password";
-@use "./common";
 @use "./overrides/tooltip";
-
-@layer base, primeng, reset;
-
-@layer base {
-  * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-}
-
-@layer reset {
-  html,
-  body {
-    font-family: var.$openSans;
-    font-weight: 400;
-    font-size: 14px;
-    max-height: 100vh;
-    max-width: 100vw;
-  }
-
-  h1 {
-    font-size: 1.7rem;
-  }
-
-  h2 {
-    font-size: 1.3rem;
-  }
-
-  h3 {
-    font-size: 1rem;
-  }
-
-  h1,
-  h2,
-  h3 {
-    font-weight: 700;
-    text-transform: capitalize;
-    color: var.$dark-blue-1;
-  }
-
-  li {
-    list-style: none;
-  }
-
-  .inside-list {
-    li {
-      list-style: inside;
-    }
-  }
-
-  a,
-  a:visited {
-    text-decoration: none;
-    color: var.$pr-blue-1;
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
-
-  i {
-    @include mix.flex-center;
-  }
-
-  button {
-    color: white;
-  }
-
-  dl {
-    margin-bottom: 1.7rem;
-    padding: 0;
-  }
-
-  dt {
-    display: inline;
-    font-weight: bold;
-  }
-
-  dd {
-    margin: 0;
-    display: inline;
-
-    &::after {
-      content: "";
-      display: block;
-    }
-  }
-
-  .copy-notification {
-    position: absolute;
-    top: -45px;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 10px;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    white-space: nowrap;
-    border-radius: 8px;
-    box-shadow: 0 0 4px 0 #00000029;
-    background: var.$white;
-
-    &.visible {
-      opacity: 1;
-    }
-
-    &:after {
-      content: "";
-      position: absolute;
-      bottom: -5px;
-      left: 50%;
-      transform: translateX(-50%);
-      border-width: 5px 5px 0;
-      border-style: solid;
-      border-color: var.$grey-1 transparent transparent;
-    }
-  }
-
-  i,
-  svg {
-    outline: none;
-  }
-}
-
-.highlight {
-  color: var.$pr-blue-1;
-}