refactor: css cleanup

src/components/modals/main/scss/modules/_links.scss

@@ -0,0 +1,25 @@
+.resetLink {
+  color: var(--modal-link);
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  span {
+    font-size: 1.2rem;
+    color: var(--modal-link);
+    vertical-align: text-bottom;
+    margin-left: 5px;
+  }
+}
+
+.modalLink {
+  color: var(--modal-link);
+  cursor: pointer;
+  margin-left: 5px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}

src/components/modals/main/scss/modules/_navbar.scss

@@ -0,0 +1,71 @@
+.navbar-item {
+  font-size: 22px;
+  font-weight: 500;
+  display: inline-flex;
+
+  &:hover {
+    color: grey;
+    background: none;
+  }
+
+  span,
+  svg {
+    font-size: 1.1em !important;
+  }
+
+  svg {
+    font-size: 1.2em !important;
+  }
+}
+
+/* safari fix */
+@supports (-webkit-hyphens: none) {
+  .navbar-item {
+    display: inline-block !important;
+  }
+}
+
+.modalNavbar {
+  position: absolute;
+  left: 20rem;
+  top: 1rem;
+  justify-content: center;
+
+  svg {
+    margin-right: 0.5rem;
+    padding: 3px;
+    vertical-align: middle;
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  .modalNavbar {
+    left: 6rem;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  li.navbar-item {
+    span {
+      display: none;
+    }
+  }
+}
+
+.navbar-item-active {
+  background: map-get($theme-colours, 'gradient');
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+
+  svg {
+    color: orange;
+  }
+
+  &:hover {
+    background: map-get($theme-colours, 'gradient');
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+}

src/components/modals/main/scss/modules/_scrollbars.scss

@@ -0,0 +1,12 @@
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  border-top-right-radius: map-get($modal, 'border-radius');
+  border-bottom-right-radius: map-get($modal, 'border-radius');
+}
+
+::-webkit-scrollbar-thumb {
+  background: #636e72;
+  border-top-right-radius: map-get($modal, 'border-radius');
+  border-bottom-right-radius: map-get($modal, 'border-radius');
+}

src/components/modals/main/scss/modules/_sidebar.scss

@@ -0,0 +1,87 @@
+ul.sidebar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding-left: 0;
+  background: var(--sidebar);
+  border-radius: 12px 0 0 12px;
+  text-align: left;
+  font-size: 24px;
+  min-height: 100vh;
+
+  h1 {
+    text-align: center;
+    font-size: 1.8em;
+  }
+
+  svg {
+    vertical-align: middle;
+    padding: 5px;
+  }
+
+  hr {
+    height: 3px;
+    background: rgba(196, 196, 196, 0.74);
+    width: 75%;
+    outline: none;
+    border: none;
+  }
+}
+
+@media (max-height: 999px) and (min-height: 920px) {
+  ul.sidebar {
+    min-height: 160vh;
+  }
+}
+
+@media (max-height: 919px) and (min-height: 700px) {
+  ul.sidebar {
+    min-height: 200vh;
+  }
+}
+
+@media (max-height: 699px) and (min-height: 400px) {
+  ul.sidebar {
+    min-height: 260vh;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  ul.sidebar {
+    width: 310px;
+    align-items: center;
+  }
+}
+
+li {
+  list-style: none;
+  font-size: 24px;
+  padding: 5px 30px 5px 30px;
+  cursor: pointer;
+  margin-top: 2px;
+}
+
+.tab-list-active {
+  background: var(--tab-active);
+}
+
+@media only screen and (max-width: 1200px) {
+  li.tab-list-item {
+    span {
+      display: none;
+    }
+  }
+
+  ul.sidebar {
+    h1 {
+      display: none;
+    }
+  }
+}
+
+.tab-list-item {
+  &:hover {
+    background: var(--tab-active);
+  }
+}

src/components/modals/main/scss/modules/_tab-content.scss

@@ -0,0 +1,43 @@
+.tab-content {
+  position: absolute;
+
+  h3 {
+    text-transform: uppercase;
+  }
+}
+
+@media only screen and (min-width: 2300px) {
+  .tab-content {
+    left: 350px;
+    top: 7%;
+  }
+}
+
+@media only screen and (max-width: 1920px) {
+  .tab-content {
+    left: 120px;
+    top: 50px;
+  }
+}
+
+@media only screen and (min-width: 1920px) {
+  .tab-content {
+    left: 350px;
+    top: 7%;
+  }
+}
+
+@media only screen and (max-width: 1400px),
+(min-width: 1400px) {
+  .tab-content {
+    left: 350px;
+    top: 75px;
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  .tab-content {
+    left: 125px;
+    top: 75px;
+  }
+}