From ab3e2fd9c2123a393032f743667349f2e6e712d2 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Tue, 19 Mar 2024 11:02:59 +0100
Subject: [PATCH] :recycle: Remove unused CSS files

---
 .../styles/common/refactor/mixins.scss        |  12 +
 frontend/resources/styles/main-default.scss   |  14 -
 .../styles/main/layouts/inspect.scss          | 161 -----
 .../resources/styles/main/layouts/login.scss  | 250 --------
 .../resources/styles/main/layouts/viewer.scss | 101 ---
 .../styles/main/partials/activity-bar.scss    |  77 ---
 .../styles/main/partials/context-menu.scss    | 104 ----
 .../styles/main/partials/dropdown.scss        |  70 ---
 .../styles/main/partials/editable-label.scss  |  30 -
 .../styles/main/partials/exception-page.scss  |  83 ---
 .../resources/styles/main/partials/forms.scss | 390 ------------
 .../styles/main/partials/project-bar.scss     |  94 ---
 .../styles/main/partials/sidebar.scss         | 575 ------------------
 .../main/partials/signup-questions.scss       | 190 ------
 .../styles/main/partials/tab-container.scss   |  45 --
 .../styles/main/partials/user-settings.scss   | 188 ------
 .../src/app/main/ui/dashboard/sidebar.scss    |   2 +-
 .../main/ui/viewer/inspect/right_sidebar.scss |   2 +-
 18 files changed, 14 insertions(+), 2374 deletions(-)
 delete mode 100644 frontend/resources/styles/main/layouts/inspect.scss
 delete mode 100644 frontend/resources/styles/main/layouts/login.scss
 delete mode 100644 frontend/resources/styles/main/layouts/viewer.scss
 delete mode 100644 frontend/resources/styles/main/partials/activity-bar.scss
 delete mode 100644 frontend/resources/styles/main/partials/context-menu.scss
 delete mode 100644 frontend/resources/styles/main/partials/dropdown.scss
 delete mode 100644 frontend/resources/styles/main/partials/editable-label.scss
 delete mode 100644 frontend/resources/styles/main/partials/exception-page.scss
 delete mode 100644 frontend/resources/styles/main/partials/forms.scss
 delete mode 100644 frontend/resources/styles/main/partials/project-bar.scss
 delete mode 100644 frontend/resources/styles/main/partials/sidebar.scss
 delete mode 100644 frontend/resources/styles/main/partials/signup-questions.scss
 delete mode 100644 frontend/resources/styles/main/partials/tab-container.scss
 delete mode 100644 frontend/resources/styles/main/partials/user-settings.scss

diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss
index 992380e57..1a9c06ab8 100644
--- a/frontend/resources/styles/common/refactor/mixins.scss
+++ b/frontend/resources/styles/common/refactor/mixins.scss
@@ -4,6 +4,18 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) {
+  $filepath: "/fonts/" + $file;
+  @font-face {
+    font-family: "#{$style-name}";
+    src:
+      url($filepath + ".woff2") format("woff2"),
+      url($filepath + ".ttf") format("truetype");
+    font-weight: unquote($weight);
+    font-style: unquote($style);
+  }
+}
+
 @mixin flexCenter {
   display: flex;
   justify-content: center;
diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index 48c342b70..0f4f8e621 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -33,34 +33,20 @@
 //#################################################
 
 @import "common/base";
-@import "main/layouts/login";
 @import "main/layouts/main-layout";
 @import "main/layouts/not-found";
-@import "main/layouts/viewer";
-@import "main/layouts/inspect";
 
 //#################################################
 // Commons
 //#################################################
 
 @import "common/framework";
-@import "main/partials/forms";
 @import "main/partials/texts";
-@import "main/partials/context-menu";
-@import "main/partials/dropdown";
 
 //#################################################
 // Partials
 //#################################################
 
-@import "main/partials/activity-bar";
 @import "main/partials/debug-icons-preview";
-@import "main/partials/editable-label";
 @import "main/partials/loader";
-@import "main/partials/project-bar";
-@import "main/partials/sidebar";
-@import "main/partials/tab-container";
-@import "main/partials/user-settings";
 @import "main/partials/workspace";
-@import "main/partials/exception-page";
-@import "main/partials/signup-questions";
diff --git a/frontend/resources/styles/main/layouts/inspect.scss b/frontend/resources/styles/main/layouts/inspect.scss
deleted file mode 100644
index bbf4d1556..000000000
--- a/frontend/resources/styles/main/layouts/inspect.scss
+++ /dev/null
@@ -1,161 +0,0 @@
-$width-left-toolbar: 48px;
-$width-settings-bar: 256px;
-
-.inspect-layout {
-  height: 100vh;
-  display: grid;
-  grid-template-rows: 48px auto;
-  grid-template-columns: 1fr;
-  user-select: none;
-
-  .viewer-header {
-    grid-column: 1 / span 1;
-    grid-row: 1 / span 1;
-  }
-
-  .viewer-content {
-    grid-column: 1 / span 1;
-    grid-row: 2 / span 1;
-  }
-}
-
-.fullscreen.inspect-layout.force-visible {
-  display: grid;
-  grid-template-rows: 1fr;
-
-  & .viewer-header {
-    position: fixed;
-    top: 0;
-    transition: top 400ms ease 300ms;
-    margin-bottom: 0;
-    z-index: 10;
-  }
-
-  & .viewer-bottom {
-    position: fixed;
-    bottom: 0;
-    transition: bottom 400ms ease 300ms;
-    z-index: 2;
-  }
-}
-
-.fullscreen.inspect-layout:not(.force-visible) {
-  & .viewer-header {
-    width: 100%;
-    position: fixed;
-    top: -48px;
-    left: 0;
-    transition: top 400ms ease 300ms;
-    z-index: 10;
-    margin-bottom: 48px;
-
-    &::after {
-      content: " ";
-      position: absolute;
-      width: 100%;
-      height: 1rem;
-      left: 0;
-      top: 48px;
-    }
-  }
-
-  & .viewer-header:hover {
-    top: 0;
-    transition: top 200ms;
-  }
-
-  & .viewer-bottom {
-    width: 100%;
-    position: fixed;
-    bottom: -48px;
-    left: 0;
-    transition: bottom 400ms ease 300ms;
-    z-index: 2;
-    &::after {
-      content: " ";
-      position: absolute;
-      width: 100%;
-      height: 1rem;
-      left: 0;
-      bottom: 0px;
-    }
-  }
-
-  & .viewer-bottom:hover {
-    bottom: 0px;
-    transition: bottom 200ms;
-  }
-
-  & .viewer-content {
-    grid-row: 1 / span 2;
-  }
-}
-
-.inspect-layout {
-  .viewer-section {
-    flex-wrap: nowrap;
-    margin-top: 0;
-    &.fullscreen {
-      .settings-bar,
-      .settings-bar {
-        padding-top: 48px;
-      }
-    }
-  }
-
-  .settings-bar {
-    width: $width-settings-bar;
-
-    &.settings-bar-right,
-    &.settings-bar-left {
-      height: 100%;
-      position: relative;
-      left: unset;
-      right: unset;
-
-      .settings-bar-inside {
-        padding-top: 0.5rem;
-        overflow-y: auto;
-      }
-    }
-
-    &.settings-bar-right {
-      width: 100%;
-      grid-area: right-sidebar;
-    }
-  }
-
-  .inspect-svg-wrapper {
-    flex: 1;
-    overflow: hidden;
-    flex-direction: column;
-    justify-content: flex-start;
-    position: relative;
-  }
-
-  .inspect-svg-container {
-    display: grid;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    align-items: center;
-    justify-content: safe center;
-    margin: 0 auto;
-  }
-}
-
-.sidebar-container {
-  display: flex;
-  flex-direction: column;
-  width: var(--width, $width-settings-bar);
-  height: 100%;
-  overflow: hidden;
-
-  & > .resize-area {
-    position: absolute;
-    width: 8px;
-    height: 100%;
-    z-index: 10;
-    cursor: ew-resize;
-  }
-}
diff --git a/frontend/resources/styles/main/layouts/login.scss b/frontend/resources/styles/main/layouts/login.scss
deleted file mode 100644
index cee660c18..000000000
--- a/frontend/resources/styles/main/layouts/login.scss
+++ /dev/null
@@ -1,250 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-// TODO: rename to auth.scss
-
-.auth {
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: 33% auto;
-  height: 100vh;
-  overflow-y: scroll;
-}
-
-.auth-sidebar {
-  grid-column: 1 / span 1;
-  height: 100vh;
-  display: flex;
-  padding-top: 7vh;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  background-color: #151035;
-  background-image: url("/images/login-penpot.svg");
-  background-position: center 30vh;
-  background-size: 96%;
-  background-repeat: no-repeat;
-
-  .tagline {
-    text-align: center;
-    width: 280px;
-    font-size: $fs18;
-    margin-top: 2vh;
-    color: white;
-  }
-
-  .logo {
-    svg {
-      fill: white;
-      max-width: 11vw;
-      height: 80px;
-    }
-    .hidden-name {
-      visibility: hidden;
-      width: 0;
-      height: 0;
-      float: left;
-    }
-  }
-}
-
-.auth-content {
-  grid-column: 2 / span 1;
-  background-color: $color-white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-
-  .form-container {
-    width: 412px;
-    flex-direction: column;
-    margin-bottom: 30px;
-    .auth-buttons {
-      margin: $size-6 0 $size-4 0;
-      display: flex;
-      justify-content: center;
-      column-gap: 17px;
-    }
-
-    form {
-      margin: 2rem 0 0.5rem 0;
-      .accept-terms-and-privacy-wrapper {
-        position: relative;
-        .input-checkbox {
-          margin-bottom: 0;
-        }
-        .input-checkbox input[type="checkbox"] {
-          position: absolute;
-          display: block;
-          width: 20px;
-          height: 20px;
-          opacity: 0;
-          top: 22px;
-        }
-        label {
-          margin-left: 40px;
-        }
-        label:before {
-          position: absolute;
-          top: 15px;
-          left: -36px;
-        }
-        label:after {
-          position: absolute;
-          top: 15px;
-          left: -33px;
-        }
-        .input-checkbox input[type="checkbox"]:focus {
-          opacity: 100%;
-        }
-        .auth-links {
-          margin-left: 40px;
-          font-size: 0.75rem;
-        }
-      }
-    }
-  }
-
-  input {
-    margin-bottom: 0px;
-  }
-
-  .buttons-stack {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    *:not(:last-child) {
-      margin-bottom: $size-4;
-    }
-  }
-
-  .btn-large {
-    flex-grow: 1;
-    font-size: $fs14;
-    font-style: normal;
-    font-weight: $fw400;
-  }
-
-  .btn-google-auth {
-    background-color: #4285f4;
-    color: $color-white;
-    margin-bottom: $size-4;
-    text-decoration: none;
-    .logo {
-      width: 20px;
-      height: 20px;
-      margin-right: 1rem;
-    }
-    &:hover,
-    &:focus {
-      background-color: #2065d7;
-      color: $color-white;
-    }
-  }
-
-  .btn-gitlab-auth {
-    background-color: #fc6d26;
-    color: $color-white;
-    margin-bottom: $size-4;
-    text-decoration: none;
-
-    .logo {
-      width: 20px;
-      height: 20px;
-      margin-right: 1rem;
-    }
-
-    &:hover,
-    &:focus {
-      background-color: #ee5f18;
-      color: $color-white;
-    }
-  }
-
-  .btn-github-auth {
-    background-color: #4c4c4c;
-    color: $color-white;
-    margin-bottom: $size-4;
-    text-decoration: none;
-
-    .logo {
-      width: 20px;
-      height: 20px;
-      margin-right: 1rem;
-    }
-
-    &:hover,
-    &:focus {
-      background-color: #2f2f2f;
-      color: $color-white;
-    }
-  }
-
-  .link-oidc {
-    text-align: center;
-  }
-
-  .separator {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    text-transform: uppercase;
-    text-align: center;
-
-    .text {
-      margin: 0 10px;
-      color: $color-gray-40;
-    }
-
-    .line {
-      border: 1px solid $color-gray-10;
-      flex-grow: 10;
-      margin: auto;
-    }
-  }
-
-  .links {
-    display: flex;
-    font-size: $fs14;
-    flex-direction: column;
-    justify-content: space-between;
-    margin-top: $size-4;
-    margin-bottom: $size-4;
-
-    &.demo {
-      justify-content: center;
-      margin-top: $size-5;
-    }
-
-    .link-entry {
-      font-size: $fs14;
-      color: $color-gray-40;
-      margin-bottom: 10px;
-      a {
-        font-size: $fs14;
-        font-weight: $fw500;
-        color: $color-gray-50;
-        &:hover,
-        &:focus {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-
-  .terms-login {
-    bottom: $size-5;
-    font-size: $fs14;
-    position: absolute;
-
-    span {
-      margin: 0 $size-2;
-      color: $color-gray-40;
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/layouts/viewer.scss b/frontend/resources/styles/main/layouts/viewer.scss
deleted file mode 100644
index 840c2b559..000000000
--- a/frontend/resources/styles/main/layouts/viewer.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-.viewer-layout {
-  height: 100vh;
-  display: grid;
-  grid-template-rows: 48px auto;
-  grid-template-columns: 1fr;
-  user-select: none;
-
-  .viewer-header {
-    grid-column: 1 / span 1;
-    grid-row: 1 / span 1;
-  }
-
-  .viewer-content {
-    grid-column: 1 / span 1;
-    grid-row: 2 / span 1;
-  }
-}
-
-.fullscreen.viewer-layout.force-visible {
-  grid-template-rows: 1fr;
-  & .viewer-header {
-    position: fixed;
-    top: 0;
-    transition: top 400ms ease 300ms;
-    margin-bottom: 0;
-    z-index: 2;
-  }
-
-  & .viewer-bottom {
-    position: fixed;
-    bottom: 0;
-    transition: bottom 400ms ease 300ms;
-    z-index: 2;
-  }
-}
-
-.fullscreen.viewer-layout:not(.force-visible) {
-  grid-template-rows: 1fr;
-  & .viewer-header {
-    width: 100%;
-    position: fixed;
-    top: -48px;
-    left: 0;
-    transition: top 400ms ease 300ms;
-    z-index: 2;
-    margin-bottom: 48px;
-    &::after {
-      content: " ";
-      position: absolute;
-      width: 100%;
-      height: 1rem;
-      left: 0;
-      top: 48px;
-    }
-  }
-
-  & .viewer-header:hover {
-    top: 0;
-    transition: top 200ms;
-  }
-
-  & .viewer-bottom {
-    width: 100%;
-    position: fixed;
-    bottom: -48px;
-    left: 0;
-    transition: bottom 400ms ease 300ms;
-    z-index: 2;
-    &::after {
-      content: " ";
-      position: absolute;
-      width: 100%;
-      height: 1rem;
-      left: 0;
-      bottom: 0px;
-    }
-  }
-
-  & .viewer-bottom:hover {
-    bottom: 0px;
-    transition: bottom 200ms;
-  }
-
-  & .viewer-content {
-    grid-row: 1 / span 2;
-  }
-}
-
-.viewer-overlay {
-  position: absolute;
-}
-
-.viewer-overlay-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  &.visible {
-    background-color: rgb(0, 0, 0, 0.2);
-  }
-}
diff --git a/frontend/resources/styles/main/partials/activity-bar.scss b/frontend/resources/styles/main/partials/activity-bar.scss
deleted file mode 100644
index 5e5ad957b..000000000
--- a/frontend/resources/styles/main/partials/activity-bar.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-.activity-bar {
-  background-color: $color-gray-50;
-  bottom: 0;
-  height: 100%;
-  position: fixed;
-  right: 0;
-  width: 250px;
-
-  .activity-bar-inside {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    padding-top: 70px;
-  }
-
-  h4 {
-    color: $color-gray-40;
-    font-size: $fs16;
-    font-weight: $fw700;
-    margin-bottom: $size-1;
-  }
-
-  .date-ribbon {
-    background-color: lighten($color-gray-20, 12%);
-    color: $color-white;
-    font-size: $fs12;
-    font-weight: $fw700;
-    padding: 2px;
-    text-align: center;
-    width: 100%;
-  }
-
-  .activity-input {
-    border-bottom: 1px solid $color-gray-10;
-    display: flex;
-    font-size: $fs12;
-    padding: $size-2;
-    width: 100%;
-
-    img.activity-author {
-      border-radius: 50%;
-      flex-shrink: 0;
-      height: 30px;
-      margin-right: $size-4;
-      width: 30px;
-    }
-
-    .activity-content {
-      display: flex;
-      flex-direction: column;
-
-      .activity-project {
-        align-items: center;
-        display: flex;
-        flex-wrap: wrap;
-
-        a {
-          font-weight: $fw700;
-          margin: 0 3px;
-        }
-      }
-
-      .activity-time {
-        color: $color-gray-20;
-        font-size: $fs12;
-        font-style: italic;
-      }
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/partials/context-menu.scss b/frontend/resources/styles/main/partials/context-menu.scss
deleted file mode 100644
index 3f4e3f0dd..000000000
--- a/frontend/resources/styles/main/partials/context-menu.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-.context-menu {
-  position: relative;
-  visibility: hidden;
-  opacity: 0;
-  z-index: 3;
-}
-
-.context-menu.is-open {
-  position: relative;
-  display: block;
-  opacity: 1;
-  visibility: visible;
-}
-
-.context-menu.fixed {
-  position: fixed;
-}
-
-.context-menu-items {
-  background: $color-white;
-  border-radius: $br3;
-  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-  left: -$size-4;
-  max-height: 30rem;
-  min-width: 7rem;
-  overflow: auto;
-  position: absolute;
-  top: $size-3;
-
-  & .separator {
-    border-top: 1px solid $color-gray-10;
-    padding: 0px;
-    margin: 2px;
-  }
-
-  &.min-width {
-    min-width: 13rem;
-  }
-}
-
-.context-menu-action {
-  color: $color-black;
-  display: block;
-  font-size: $fs14;
-  font-weight: $fw400;
-  padding: $size-2 $size-4;
-  text-align: left;
-  white-space: nowrap;
-
-  &:hover {
-    color: $color-black;
-    background-color: $color-primary-lighter;
-    text-decoration: none;
-  }
-
-  &.submenu {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    & span {
-      margin-left: 0.5rem;
-    }
-
-    & svg {
-      height: 10px;
-      width: 10px;
-    }
-  }
-
-  &.submenu-back {
-    color: $color-black;
-    display: flex;
-    font-weight: $fw700;
-    align-items: center;
-
-    & svg {
-      height: 10px;
-      width: 10px;
-      transform: rotate(180deg);
-      margin-right: $size-2;
-    }
-  }
-}
-
-.context-menu.is-selectable {
-  & .context-menu-action {
-    padding-left: 1.5rem;
-  }
-
-  & .context-menu-item.is-selected .context-menu-action {
-    background-image: url(/images/icons/tick.svg);
-    background-repeat: no-repeat;
-    background-position: 5% 48%;
-    background-size: 10px;
-    font-weight: $fw700;
-  }
-}
diff --git a/frontend/resources/styles/main/partials/dropdown.scss b/frontend/resources/styles/main/partials/dropdown.scss
deleted file mode 100644
index ed3a2817f..000000000
--- a/frontend/resources/styles/main/partials/dropdown.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-.dropdown {
-  position: absolute;
-  max-height: 30rem;
-  background-color: $color-white;
-  border-radius: $br2;
-  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-  z-index: 3;
-
-  hr {
-    margin: 0 !important;
-    border-color: $color-gray-10;
-  }
-
-  > li {
-    display: flex;
-    align-items: center;
-    color: $color-gray-60;
-    cursor: pointer;
-    font-size: $fs14;
-    height: 40px;
-    padding: 5px 16px;
-
-    &.warning {
-      color: $color-danger;
-    }
-
-    svg {
-      fill: $color-gray-20;
-      height: 12px;
-      width: 12px;
-    }
-
-    &.title {
-      font-weight: $fw600;
-      cursor: default;
-    }
-
-    &:hover {
-      background-color: $color-primary-lighter;
-    }
-
-    &:focus {
-      border: 1px black solid;
-    }
-  }
-
-  &.with-check {
-    > li {
-      padding: 5px 10px;
-    }
-
-    > li:not(.selected) {
-      svg {
-        display: none;
-      }
-    }
-
-    svg {
-      fill: $color-gray-50;
-    }
-
-    .icon {
-      display: flex;
-      align-items: center;
-      width: 20px;
-      height: 20px;
-      margin-right: 7px;
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/partials/editable-label.scss b/frontend/resources/styles/main/partials/editable-label.scss
deleted file mode 100644
index db2d42a89..000000000
--- a/frontend/resources/styles/main/partials/editable-label.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.editable-label {
-  display: flex;
-
-  &.is-hidden {
-    display: none;
-  }
-}
-
-.editable-label-input {
-  border: 0;
-  height: 30px;
-  padding: 5px;
-  margin: 0;
-  width: 100%;
-  background-color: $color-white;
-}
-
-.editable-label-close {
-  background-color: $color-white;
-  cursor: pointer;
-  padding: 3px 5px;
-
-  & svg {
-    fill: $color-gray-30;
-    height: 15px;
-    transform: rotate(45deg) translateY(7px);
-    width: 15px;
-    margin: 0;
-  }
-}
diff --git a/frontend/resources/styles/main/partials/exception-page.scss b/frontend/resources/styles/main/partials/exception-page.scss
deleted file mode 100644
index 30686023a..000000000
--- a/frontend/resources/styles/main/partials/exception-page.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-.exception-layout {
-  display: grid;
-
-  grid-template-rows: 120px auto;
-  grid-template-columns: 1fr;
-}
-
-.exception-header {
-  grid-column: 1 / span 1;
-  grid-row: 1 / span 1;
-
-  display: flex;
-  align-items: center;
-  padding: 32px;
-  z-index: 40;
-
-  cursor: pointer;
-
-  svg {
-    height: 55px;
-    width: 170px;
-  }
-}
-
-.exception-content {
-  grid-column: 1 / span 1;
-  grid-row: 1 / span 2;
-  height: 100vh;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .container {
-    max-width: 600px;
-  }
-
-  .image {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin-bottom: 2rem;
-
-    svg {
-      height: 220px;
-      width: 220px;
-    }
-  }
-
-  .main-message {
-    color: $color-black;
-    font-size: $fs80;
-    line-height: $lh-188; // Original value was 150px; 150px/80px = 187.5 % => $lh-188 (rounded)
-    text-align: center;
-  }
-
-  .desc-message {
-    color: $color-black;
-    font-size: $fs26;
-    font-weight: $fw300;
-    text-align: center;
-  }
-
-  .sign-info {
-    margin-top: 20px;
-    color: $color-black;
-    font-size: $fs16;
-    font-weight: $fw200;
-    text-align: center;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    b {
-      font-weight: $fw400;
-    }
-
-    .btn-primary {
-      margin-top: 15px;
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/partials/forms.scss b/frontend/resources/styles/main/partials/forms.scss
deleted file mode 100644
index 4d42d4c31..000000000
--- a/frontend/resources/styles/main/partials/forms.scss
+++ /dev/null
@@ -1,390 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-input,
-select,
-textarea {
-  &.invalid {
-    border-color: $color-danger;
-    color: $color-danger;
-  }
-}
-
-.form-container,
-.generic-form {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-
-  .forms-container {
-    display: flex;
-    margin-top: 40px;
-    width: 536px;
-    justify-content: center;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    // flex-basis: 368px;
-  }
-
-  .fields-row {
-    margin-bottom: 20px;
-    flex-direction: column;
-
-    .options {
-      display: flex;
-      justify-content: flex-end;
-      font-size: $fs14;
-      margin-top: 13px;
-    }
-  }
-
-  .field {
-    margin-bottom: 20px;
-  }
-
-  h1 {
-    font-size: $fs36;
-    color: #2c233e;
-    margin-bottom: 20px;
-  }
-
-  .subtitle {
-    font-size: $fs24;
-    color: #2c233e;
-    margin-bottom: 20px;
-  }
-
-  .notification-icon {
-    justify-content: center;
-    display: flex;
-    margin-bottom: 3rem;
-
-    svg {
-      fill: $color-gray-60;
-      height: 40%;
-      width: 40%;
-    }
-  }
-
-  .notification-text {
-    font-size: $fs18;
-    color: $color-gray-60;
-    margin-bottom: 20px;
-  }
-
-  .notification-text-email {
-    background: $color-gray-10;
-    border-radius: $br3;
-    color: $color-gray-60;
-    font-size: $fs18;
-    font-weight: $fw500;
-    margin: 1.5rem 0 2.5rem 0;
-    padding: 1rem;
-    text-align: center;
-  }
-
-  h2 {
-    font-size: $fs24;
-    color: $color-gray-60;
-    // height: 40px;
-    display: flex;
-    align-items: center;
-  }
-
-  a {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  p {
-    color: $color-gray-60;
-  }
-
-  hr {
-    border-color: $color-gray-20;
-  }
-}
-
-.custom-input {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  input,
-  textarea {
-    background-color: $color-white;
-    border-radius: $br2;
-    border: 1px solid $color-gray-20;
-    color: $color-gray-60;
-    font-size: $fs14;
-    height: 40px;
-    margin: 0;
-    padding: 15px 15px 0 15px;
-    width: 100%;
-  }
-
-  textarea {
-    height: auto;
-    font-size: $fs14;
-    font-family: "worksans", sans-serif;
-    padding-top: 20px;
-  }
-
-  // Makes the background for autocomplete white
-  input:-webkit-autofill,
-  input:-webkit-autofill:hover,
-  input:-webkit-autofill:focus,
-  input:-webkit-autofill:active {
-    -webkit-box-shadow: 0 0 0 30px $color-white inset !important;
-  }
-
-  label {
-    font-size: $fs12;
-    color: $color-gray-50;
-    position: absolute;
-    left: 15px;
-    top: 6px;
-  }
-
-  &.invalid {
-    input {
-      border-color: $color-danger;
-    }
-    label {
-      color: $color-danger;
-    }
-  }
-
-  &.valid {
-    input {
-      border-color: $color-success;
-    }
-  }
-
-  &.focus {
-    input {
-      border-color: $color-gray-60;
-    }
-  }
-
-  &.disabled {
-    input {
-      background-color: lighten($color-gray-10, 5%);
-      user-select: none;
-    }
-  }
-
-  &.empty {
-    input {
-      padding-top: 0;
-    }
-
-    label {
-      clip: rect(0 0 0 0);
-      height: 1px;
-      margin: -1px;
-      overflow: hidden;
-      padding: 0;
-      width: 1px;
-    }
-  }
-
-  &.with-icon {
-    input {
-      padding-right: 50px;
-    }
-  }
-
-  .help-icon {
-    position: absolute;
-    right: 15px;
-    top: 12px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    svg {
-      fill: $color-gray-30;
-      width: 15px;
-      height: 15px;
-    }
-  }
-
-  .hint {
-    color: $color-gray-40;
-    padding: 4px;
-    font-size: $fs12;
-  }
-
-  .error {
-    color: $color-danger;
-    padding: 4px;
-    font-size: $fs12;
-  }
-}
-
-.custom-multi-input {
-  border-radius: $br2;
-  border: 1px solid $color-gray-20;
-  max-height: 300px;
-  overflow-y: auto;
-
-  &.invalid {
-    label {
-      color: unset;
-    }
-  }
-
-  input {
-    border: 0px;
-
-    &.no-padding {
-      padding-top: 0px;
-    }
-  }
-
-  .selected-items {
-    padding-top: 25px;
-    padding-left: 15px;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .selected-item {
-    width: 100%;
-
-    &:not(:last-child) {
-      margin-right: 3px;
-    }
-
-    .around {
-      border: 1px solid $color-gray-20;
-      padding-left: 5px;
-      border-radius: $br4;
-      &.invalid {
-        border: 1px solid $color-danger;
-      }
-      &.caution {
-        border: 1px solid $color-warning;
-      }
-
-      .text {
-        display: inline-block;
-        max-width: 85%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        line-height: $lh-115; // Original value was 16px; 16px/14px = 114.285714286% => $lh-115 (rounded)
-        font-size: $fs14;
-        color: $color-black;
-      }
-      .icon {
-        cursor: pointer;
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-    }
-  }
-}
-
-.custom-select {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  justify-content: center;
-
-  label {
-    font-size: $fs12;
-    color: $color-gray-30;
-  }
-
-  select {
-    cursor: pointer;
-    font-size: $fs14;
-    border: 0px;
-    opacity: 0;
-    z-index: 10;
-    padding: 0px;
-    margin: 0px;
-    background-color: transparent;
-    position: absolute;
-    width: calc(100% - 1px);
-    height: 100%;
-    padding: 15px;
-  }
-
-  .main-content {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    font-family: "worksans", sans-serif;
-    justify-content: center;
-    padding-top: 6px;
-    padding-bottom: 6px;
-    padding-left: 15px;
-  }
-
-  .input-container {
-    display: flex;
-    flex-direction: row;
-
-    background-color: $color-white;
-    border-radius: $br2;
-    border: 1px solid $color-gray-20;
-    height: 40px;
-
-    &.focus {
-      border-color: $color-gray-60;
-    }
-
-    &.invalid {
-      border-color: $color-danger;
-      label {
-        color: $color-danger;
-      }
-    }
-
-    &.valid {
-      border-color: $color-success;
-    }
-
-    &.focus {
-      border-color: $color-gray-60;
-    }
-
-    &.disabled {
-      background-color: $color-gray-10;
-      user-select: none;
-    }
-  }
-
-  .value {
-    color: $color-gray-60;
-    font-size: $fs14;
-    width: 100%;
-    border: 0px;
-    padding: 0px;
-    margin: 0px;
-  }
-
-  .icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding-left: 10px;
-    padding-right: 10px;
-    pointer-events: none;
-
-    svg {
-      fill: $color-gray-30;
-      transform: rotate(90deg);
-      width: 15px;
-      height: 15px;
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/partials/project-bar.scss b/frontend/resources/styles/main/partials/project-bar.scss
deleted file mode 100644
index dc8e76130..000000000
--- a/frontend/resources/styles/main/partials/project-bar.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-.project-bar {
-  background-color: $color-gray-50;
-  border-right: 1px solid $color-gray-10;
-  bottom: 0;
-  height: 100%;
-  left: 50px;
-  position: fixed;
-  width: 200px;
-  z-index: 9;
-
-  &.toggle {
-    left: -201px;
-  }
-
-  .project-bar-inside {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    padding-top: 60px;
-
-    .project-name {
-      border-bottom: 1px solid $color-gray-10;
-      font-size: $fs14;
-      font-weight: $fw700;
-      padding: 0 $size-2;
-      width: 100%;
-    }
-
-    .btn-primary,
-    .btn-warning,
-    .btn-danger {
-      font-size: $fs12;
-      margin-bottom: 0.5rem;
-      padding: 8px $size-2;
-      width: 90%;
-    }
-  }
-}
-
-.tree-view {
-  width: 100%;
-
-  li {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    padding: $size-1 $size-2;
-    position: relative;
-
-    svg {
-      fill: $color-gray-20;
-      height: 12px;
-      margin-right: $size-1;
-      width: 12px;
-    }
-
-    span {
-      font-size: $fs12;
-    }
-
-    &:hover,
-    &.current {
-      span {
-        color: $color-primary;
-      }
-    }
-
-    .options {
-      align-items: center;
-      position: absolute;
-      display: flex;
-      right: 0;
-      top: 40%;
-
-      svg {
-        fill: $color-gray-20;
-        height: 12px;
-        margin-right: $size-2;
-        width: 12px;
-
-        &:hover {
-          fill: $color-gray-40;
-        }
-      }
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
deleted file mode 100644
index 241682f4c..000000000
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ /dev/null
@@ -1,575 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-.settings-bar {
-  background-color: $color-gray-50;
-  border-left: 1px solid $color-gray-60;
-  position: relative;
-
-  &.settings-bar-left {
-    border-left: none;
-    border-right: 1px solid $color-gray-60;
-
-    & .tab-container-tabs {
-      padding-left: 1.5rem;
-    }
-  }
-
-  .settings-bar-inside {
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 100%;
-    height: calc(100% - 2px);
-
-    .tool-window {
-      position: relative;
-      border-bottom: 1px solid $color-gray-60;
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      width: 100%;
-      height: 100%;
-
-      .tool-window-bar {
-        align-items: center;
-        display: flex;
-        flex-shrink: 0;
-        padding: $size-2;
-        overflow: hidden;
-        margin: 0;
-
-        svg {
-          fill: $color-gray-20;
-          height: 12px;
-          width: 12px;
-        }
-
-        button,
-        div {
-          border: none;
-          background-color: transparent;
-          color: $color-gray-10;
-          font-size: $fs14;
-          max-width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        span.pages-title {
-          color: #e3e3e3;
-          font-size: 0.875rem;
-          max-width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        span.tool-badge {
-          border: 1px solid $color-primary;
-          border-radius: $br2;
-          font-size: $fs10;
-          color: $color-primary;
-          padding: 2px 4px;
-          margin-left: auto;
-        }
-
-        span.tool-link,
-        span.shared-library {
-          margin-left: auto;
-          padding-left: 17px;
-          display: flex;
-
-          svg {
-            fill: $color-gray-30;
-            height: 20px;
-            width: 20px;
-          }
-        }
-
-        span.tool-link:hover svg {
-          fill: $color-primary;
-        }
-
-        span.library-title {
-          color: $color-gray-10;
-          font-size: $fs14;
-          max-width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          &:first-letter {
-            text-transform: uppercase;
-          }
-        }
-
-        .tool-window-bar-icon {
-          height: 21px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          svg {
-            width: 15px;
-            height: 15px;
-          }
-        }
-
-        &.big {
-          height: 3rem;
-          padding-bottom: 1rem;
-        }
-
-        .tool-window-bar-title {
-          font-size: $fs14;
-          margin-left: 0.5rem;
-        }
-
-        .tool-window-icon {
-          margin-right: $size-2;
-          display: none;
-        }
-
-        .tool-window-close {
-          cursor: pointer;
-          margin-left: auto;
-          transform: rotate(45deg);
-
-          &:hover {
-            svg {
-              fill: $color-danger;
-            }
-          }
-        }
-
-        & .view-only-mode {
-          color: $color-primary;
-          border: 1px solid $color-primary;
-          border-radius: $br3;
-          font-size: $fs10;
-          text-transform: uppercase;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-left: auto;
-          padding: 0.25rem;
-        }
-      }
-    }
-  }
-
-  .empty {
-    color: $color-gray-20;
-    font-size: $fs12;
-    line-height: $lh-150;
-    text-align: center;
-    padding: 0 15px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    margin-top: 12px;
-
-    .tool-window-bar-icon {
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-top: 16px;
-    }
-
-    svg {
-      width: 32px;
-      height: 32px;
-      fill: $color-gray-30;
-    }
-
-    .btn-primary {
-      margin-top: 10px;
-      background-color: $color-gray-60;
-      color: $color-gray-10;
-      &:hover {
-        background-color: $color-primary;
-        color: $color-black;
-      }
-    }
-  }
-
-  & > .resize-area {
-    position: absolute;
-    width: 8px;
-    height: 100%;
-    z-index: 10;
-    cursor: ew-resize;
-  }
-
-  &.settings-bar-left > .resize-area {
-    right: -8px;
-  }
-
-  &.settings-bar-right > .resize-area {
-    left: -4px;
-  }
-}
-
-.tool-window-content {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  &.inspect {
-    .tab-container-tabs {
-      padding-bottom: 0.5rem;
-      background-color: $color-gray-50;
-      border-bottom: 1px solid $color-gray-60;
-      height: 3rem;
-    }
-
-    .tab-container-tab-title {
-      border-radius: $br4;
-
-      &.current {
-        background-color: $color-primary;
-        color: black;
-      }
-    }
-  }
-}
-
-.element-list {
-  margin: 0;
-  width: 100%;
-
-  ul {
-    border-left: 9px solid $color-gray-50;
-    margin: 0 0 0 0.4rem;
-
-    li {
-      border-left: 1px solid $color-gray-40;
-    }
-  }
-
-  li {
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    padding-top: 1px;
-    padding-bottom: 1px;
-
-    &.open {
-      ul {
-        li {
-          .element-list-body {
-            border-style: dashed;
-          }
-        }
-      }
-    }
-  }
-}
-
-.element-list.pages-list {
-  max-height: 10rem;
-
-  .context-menu {
-    position: fixed;
-  }
-
-  .context-menu-items {
-    border: none;
-    margin: none;
-  }
-
-  .context-menu-action {
-    width: 100%;
-  }
-}
-
-button.collapse-sidebar {
-  background: none;
-  border: none;
-  cursor: pointer;
-  height: 2.5rem;
-  padding-top: 0.75rem;
-  position: absolute;
-  width: 1rem;
-
-  & svg {
-    width: 12px;
-    height: 12px;
-    fill: $color-gray-20;
-    transform: rotate(180deg);
-  }
-
-  &.collapsed {
-    background: $color-gray-60;
-    left: 48px;
-    top: 48px;
-    width: 28px;
-    height: 48px;
-    padding: 0;
-    border-radius: 0 $br4 $br4 0;
-    border-left: 1px solid $color-gray-50;
-
-    & svg {
-      transform: rotate(0deg);
-    }
-  }
-}
-
-.layers-tab {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-template-columns: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  .resize-area-horiz {
-    position: absolute;
-    top: var(--height, 200px);
-    left: 0;
-    height: 8px;
-    width: 100%;
-    z-index: 10;
-    cursor: ns-resize;
-  }
-}
-
-.shortcuts,
-.debug-panel {
-  .shortcuts-header,
-  .debug-panel-header {
-    display: flex;
-    height: 40px;
-    background-color: $color-gray-60;
-
-    .shortcuts-title,
-    .debug-panel-title {
-      color: $color-white;
-      font-size: $fs12;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-grow: 1;
-      svg {
-        height: 18px;
-        width: 18px;
-        transform: rotate(45deg);
-        fill: $color-gray-20;
-      }
-    }
-
-    .shortcuts-close-button,
-    .debug-panel-close-button {
-      display: flex;
-      justify-content: center;
-      background-color: transparent;
-      border: none;
-      cursor: pointer;
-      padding: 2px 0 2px 15px;
-      position: absolute;
-      top: 8px;
-      svg {
-        height: 18px;
-        width: 18px;
-        transform: rotate(45deg);
-        fill: $color-gray-20;
-      }
-    }
-  }
-
-  .search-field {
-    height: 60px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 12px 10px;
-
-    .search-box {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border: 1px solid $color-gray-30;
-      border-radius: $br2;
-      width: 100%;
-      &:focus-within {
-        border: 1px solid $color-primary;
-      }
-      .input-text {
-        margin: 0;
-        background: $color-gray-50;
-        width: 100%;
-        color: $color-white;
-        &:focus {
-          border-bottom: none;
-        }
-      }
-      .icon-wrapper {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border: none;
-        background-color: transparent;
-        padding: 0;
-        .icon {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          &.close {
-            transform: rotate(45deg);
-          }
-        }
-      }
-      svg {
-        width: 16px;
-        height: 16px;
-        margin: 0 7px;
-        cursor: pointer;
-        fill: $color-gray-20;
-      }
-    }
-  }
-
-  .shortcut-list {
-    border-top: 1px solid $color-gray-60;
-    padding: 10px;
-    overflow-y: auto;
-    height: 90%;
-    margin-bottom: 15px;
-    .section-title {
-      background-color: $color-gray-60;
-      padding: 4px 0;
-    }
-    .section-title,
-    .subsection-title {
-      display: flex;
-      cursor: pointer;
-      margin-top: 4px;
-      font-size: $fs12;
-
-      .section-name {
-        color: $color-white;
-      }
-      .collapesed-shortcuts {
-        padding: 0 10px;
-        svg {
-          height: 8px;
-          width: 8px;
-          fill: $color-gray-20;
-        }
-        &.open {
-          svg {
-            transform: rotate(90deg);
-          }
-        }
-      }
-      .shortcut-count {
-        padding-left: 5px;
-        color: $color-white;
-      }
-    }
-    .subsection-title {
-      padding: 4px 0px;
-      .subsection-name {
-        color: $color-white;
-      }
-    }
-
-    .section-title,
-    .subsection-title {
-      &:hover {
-        background-color: $color-primary;
-        .subsection-name,
-        .section-name {
-          color: $color-gray-60;
-        }
-        svg {
-          fill: $color-gray-60;
-        }
-      }
-    }
-
-    .shortcut-name {
-      border: 1px solid $color-gray-60;
-      border-radius: $br4;
-      padding: 7px;
-      display: flex;
-      justify-content: space-between;
-      margin-top: 4px;
-      color: $color-white;
-      font-size: $fs12;
-      .command-name {
-        display: flex;
-        align-items: center;
-      }
-      .keys {
-        flex-grow: 1;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-      }
-      .char-box {
-        min-width: 15px;
-        background-color: $color-white;
-        color: $color-black;
-        border-radius: $br3;
-        padding: 2px 5px;
-        font-size: $fs11;
-        font-weight: $fw600;
-        margin: 0 2px;
-        text-transform: capitalize;
-        display: inline-block;
-        text-align: center;
-      }
-      .space {
-        margin: 0 3px;
-      }
-    }
-  }
-  .not-found {
-    background-color: $color-gray-60;
-    padding: 4px 0;
-    color: $color-white;
-    display: flex;
-    justify-content: center;
-    margin-top: 4px;
-    font-size: $fs12;
-  }
-}
-
-.debug-panel {
-  .debug-panel-inner {
-    padding: 8px;
-  }
-  .debug-option {
-    display: flex;
-    gap: 8px;
-    margin: 4px 0;
-    cursor: pointer;
-
-    label {
-      font-size: 80%;
-      cursor: pointer;
-    }
-
-    svg {
-      width: 15px;
-      height: 15px;
-      background: white;
-    }
-
-    &:hover {
-      svg {
-        stroke: $color-primary;
-      }
-      label {
-        color: $color-primary;
-      }
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/partials/signup-questions.scss b/frontend/resources/styles/main/partials/signup-questions.scss
deleted file mode 100644
index 373cae531..000000000
--- a/frontend/resources/styles/main/partials/signup-questions.scss
+++ /dev/null
@@ -1,190 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-.signup-questions {
-  background-color: $color-white;
-  color: $color-gray-60;
-  max-width: 646px;
-  overflow-y: auto;
-  padding: 1.5rem 1rem;
-  position: relative;
-  width: 100%;
-  form {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  h1,
-  h3 {
-    font-family: "worksans", sans-serif;
-    font-weight: $fw500;
-  }
-
-  h1 {
-    font-size: $fs36;
-    padding-top: 2.5rem;
-  }
-
-  h3 {
-    font-size: $fs23;
-  }
-
-  .step-header {
-    height: 2.5rem;
-    width: 100%;
-  }
-  .custom-select {
-    margin-bottom: 10px;
-  }
-
-  .step-number {
-    background-color: $color-gray-10;
-    border: none;
-    border-radius: 1rem; // Need to be investigated, before we can use variable
-    color: $color-gray-40;
-    float: right;
-    font-family: "worksans", sans-serif;
-    font-size: $fs12;
-    height: 1.5rem;
-    line-height: $lh-200; // Original value was 1.5rem = 24px; 24px/12px = 200% => lh-200
-    text-align: center;
-    width: 2.5rem;
-  }
-
-  .header-image {
-    width: 240px;
-  }
-
-  .intro {
-    font-size: $fs16;
-    padding: 0.5rem 0 1rem 0;
-    color: $color-gray-40;
-  }
-  .section {
-    display: block;
-    font-weight: $fw500;
-    font-size: $fs18;
-    margin: 0 0 0.3em 0;
-    padding: 0.8rem 0 0 0;
-    font-family: "worksans", sans-serif !important;
-  }
-
-  .other {
-    .custom-input {
-      margin: 0.75rem 0 2rem 0;
-    }
-  }
-  .buttons {
-    flex-grow: 1;
-    display: grid;
-    grid-template-columns: 50% 50%;
-    grid-template-areas: "previous next";
-    .step-prev {
-      display: flex;
-      align-items: flex-end;
-      justify-content: flex-start;
-      grid-area: previous;
-      button {
-        background-color: transparent;
-        border: none;
-        cursor: pointer;
-        height: 40px;
-        font-size: $fs15;
-      }
-    }
-
-    .step-next {
-      display: flex;
-      align-items: flex-end;
-      justify-content: flex-end;
-      grid-area: next;
-      input {
-        font-size: $fs15;
-        color: $color-black;
-        background-color: $color-primary;
-        width: 11rem;
-        margin-left: auto;
-        margin: 0;
-      }
-    }
-  }
-
-  .custom-radio {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-
-    .input-radio {
-      margin: 0;
-      max-width: 12rem;
-      width: 100%;
-
-      &.with-image {
-        display: block;
-        padding: 0;
-      }
-
-      label {
-        font-family: "worksans", sans-serif !important;
-        color: $color-gray-60;
-        font-size: $fs15;
-        padding-left: 0;
-        position: relative;
-        text-align: center;
-        height: 4rem;
-        margin: 0;
-
-        &.with-image {
-          min-height: 120px;
-          display: flex;
-          padding-top: 4rem;
-          justify-content: center;
-          background-size: 50px;
-          background-repeat: no-repeat;
-          background-position: center 0.75rem;
-        }
-      }
-
-      input[type="radio"] {
-        /*We need it to be accesible so we can't use display none*/
-        display: inline;
-        opacity: 0;
-      }
-
-      input[type="radio"] + label:before {
-        background-color: $color-white;
-        border: 1px solid $color-gray-10;
-      }
-
-      input[type="radio"] + label.with-image:before {
-        background-color: transparent;
-        border-radius: 4px;
-        min-width: 100%;
-        min-height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        margin: 0;
-      }
-
-      input[type="radio"]:focus + label:before {
-        border: 1px solid $color-gray-60;
-      }
-
-      input[type="radio"]:checked + label:before {
-        box-shadow: inset 0 0 0 4px $color-white;
-        background-color: $color-primary;
-        border: 1px solid $color-gray-30;
-      }
-
-      input[type="radio"]:checked + label.with-image:before {
-        border: 1px solid $color-primary;
-        background-color: transparent;
-      }
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/partials/tab-container.scss b/frontend/resources/styles/main/partials/tab-container.scss
deleted file mode 100644
index 33c759e0a..000000000
--- a/frontend/resources/styles/main/partials/tab-container.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.tab-container {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-template-columns: 100%;
-  height: 100%;
-}
-
-.tab-container-tabs {
-  background: $color-gray-60;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  font-size: $fs12;
-  height: 2.5rem;
-  padding: 0 0.25rem;
-}
-
-.tab-container-tab-title {
-  align-items: center;
-  background: $color-gray-60;
-  border-radius: $br2 $br2 0 0;
-  color: $color-white;
-  display: flex;
-  justify-content: center;
-  margin: 0.5rem 0.25rem 0 0.25rem;
-  width: 100%;
-
-  &.current {
-    background: $color-gray-50;
-  }
-}
-
-.tab-container-content {
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.inspect .tab-container-content {
-  overflow: hidden;
-}
-
-.tab-element,
-.tab-element-content {
-  height: 100%;
-}
diff --git a/frontend/resources/styles/main/partials/user-settings.scss b/frontend/resources/styles/main/partials/user-settings.scss
deleted file mode 100644
index 8fd19383f..000000000
--- a/frontend/resources/styles/main/partials/user-settings.scss
+++ /dev/null
@@ -1,188 +0,0 @@
-.settings-content {
-  header {
-    display: flex;
-    flex-direction: column;
-    height: 160px;
-    background-color: $color-white;
-
-    .secondary-menu {
-      display: flex;
-      justify-content: space-between;
-      height: 40px;
-      font-size: $fs14;
-      color: $color-gray-60;
-
-      .icon {
-        display: flex;
-        align-items: center;
-      }
-
-      .left {
-        margin-left: 30px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-
-        .label {
-          margin-left: 15px;
-        }
-
-        svg {
-          fill: $color-gray-60;
-          width: 14px;
-          height: 14px;
-          transform: rotate(180deg);
-        }
-      }
-      .right {
-        align-items: center;
-        cursor: pointer;
-        display: flex;
-        justify-content: center;
-        margin-right: 30px;
-
-        .label {
-          color: $color-primary-dark;
-          margin-right: 15px;
-        }
-
-        svg {
-          fill: $color-primary-dark;
-          width: 14px;
-          height: 14px;
-        }
-
-        &:hover {
-          .label {
-            color: $color-danger;
-          }
-          svg {
-            fill: $color-danger;
-          }
-        }
-      }
-    }
-
-    h1 {
-      align-items: top;
-      color: $color-gray-60;
-      display: flex;
-      flex-grow: 1;
-      font-size: $fs24;
-      font-weight: $fw400;
-      justify-content: center;
-    }
-
-    nav {
-      display: flex;
-      justify-content: center;
-      height: 40px;
-
-      .nav-item {
-        align-items: center;
-        color: $color-gray-40;
-        display: flex;
-        flex-basis: 140px;
-        justify-content: center;
-
-        &.current {
-          border-bottom: 3px solid $color-primary;
-        }
-      }
-    }
-  }
-
-  .settings-profile {
-    .forms-container {
-      margin-top: 80px;
-    }
-  }
-
-  .avatar-form {
-    flex-basis: 168px;
-    height: 100vh;
-    display: flex;
-    position: relative;
-
-    .image-change-field {
-      position: relative;
-      width: 120px;
-      height: 120px;
-
-      .update-overlay {
-        opacity: 0;
-        cursor: pointer;
-        position: absolute;
-        width: 121px;
-        height: 121px;
-        border-radius: 50%;
-        font-size: $fs24;
-        color: $color-white;
-        line-height: $lh-500; // Original value was 120px; 120px/24px =500% => $lh-500
-        text-align: center;
-        background: $color-primary-dark;
-        z-index: 14;
-      }
-
-      input[type="file"] {
-        width: 120px;
-        height: 120px;
-        position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        top: 0;
-        z-index: 15;
-      }
-
-      &:hover {
-        img {
-          display: none;
-        }
-        .update-overlay {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  .profile-form {
-    flex-grow: 1;
-    flex-basis: 390px;
-    display: flex;
-
-    flex-direction: column;
-
-    .change-email {
-      display: flex;
-      flex-direction: row;
-      font-size: $fs14;
-      color: $color-primary-dark;
-      justify-content: flex-end;
-      margin-bottom: 20px;
-    }
-  }
-
-  .avatar-form {
-    img {
-      border-radius: 50%;
-      flex-shrink: 0;
-      height: 120px;
-      margin-right: $size-4;
-      width: 120px;
-    }
-  }
-
-  .options-form,
-  .password-form {
-    display: flex;
-    flex-direction: column;
-    flex-basis: 368px;
-
-    h2 {
-      font-size: $fs14;
-      font-weight: $fw400;
-      margin-bottom: $size-4;
-    }
-  }
-}
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss
index 1a5c627e6..f939c8d44 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.scss
+++ b/frontend/src/app/main/ui/dashboard/sidebar.scss
@@ -339,7 +339,7 @@
 
 .profile-fullname {
   @include smallTitleTipography;
-  @include text-ellipsis;
+  @include textEllipsis;
   align-self: center;
   max-width: $s-160;
   color: var(--profile-foreground-color);
diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
index 694d43e0f..a542a2a1b 100644
--- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
@@ -51,7 +51,7 @@
 
 .layer-title {
   @include bodySmallTypography;
-  @include text-ellipsis;
+  @include textEllipsis;
   height: $s-32;
   padding: $s-8 0;
   color: var(--assets-item-name-foreground-color-rest);