feat(styles): swap base CSS

lsst-epo · Jul 17, 2024 · 400684e · 400684e
1 parent 1b027b3
commit 400684e
Show file tree

Hide file tree

Showing 52 changed files with 166 additions and 410 deletions.
diff --git a/components/Bubbles/_styles.scss b/components/Bubbles/_styles.scss
@@ -9,7 +9,7 @@
   .bubble {
     width: 5px;
     height: 5px;
-    background-color: var(--neutral50);
+    background-color: var(--color-rubin-gray-200);
     border-radius: 50%;
 
     &.full {

diff --git a/components/ShareButtons/GetImageButton.jsx b/components/ShareButtons/GetImageButton.jsx
@@ -1,6 +1,5 @@
 import { useContext } from "react";
 import PropTypes from "prop-types";
-import copy from "copy-to-clipboard";
 import AladinGlobalContext from "@/contexts/AladinGlobal";
 import IconComposer from "@/svg/IconComposer";
 import ShareButton from "@/components/ShareButtons/ShareButton";
@@ -12,7 +11,7 @@ export default function GetImageButton({ showLabel }) {
   return (
     <ShareButton
       showLabel={showLabel}
-      icon={<IconComposer size={100} icon="ArrowUpFromBracket" />}
+      icon={<IconComposer icon="ArrowUpFromBracket" />}
       text="Get Image"
       network="image"
       onClick={() => {

diff --git a/components/ShareButtons/_styles.scss b/components/ShareButtons/_styles.scss
@@ -49,6 +49,7 @@
 
     &.image {
       background-color: var(--turquoise70);
+      padding: 10px;
     }
 
     &.url {
@@ -97,6 +98,7 @@
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
+  list-style: none;
 
   .share-button {
     @include base.respond(functions.break(desktop-height), min, height) {
@@ -110,7 +112,7 @@
   .share-network {
     margin-top: 10px;
     font-size: 10px;
-    font-weight: functions.font-weight(light);
+    font-weight: var(--weight-font-normal);
     line-height: 1.6;
     color: var(--white);
 
@@ -125,6 +127,7 @@
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
+  list-style: none;
 
   li {
     + li {

diff --git a/components/explorer/Controls/Search/_styles.scss b/components/explorer/Controls/Search/_styles.scss
@@ -15,7 +15,7 @@
   }
 
   &:focus {
-    background-color: var(--blue15);
+    background-color: var(--color-rubin-teal-100);
   }
 
   &.active,

diff --git a/components/explorer/Controls/Zoom/_styles.scss b/components/explorer/Controls/Zoom/_styles.scss
@@ -25,7 +25,7 @@
     }
 
     &:focus {
-      background-color: var(--blue15);
+      background-color: var(--color-rubin-teal-100);
 
       &.active,
       &:hover {

diff --git a/components/explorer/Controls/_styles.scss b/components/explorer/Controls/_styles.scss
@@ -24,7 +24,6 @@
   $controlSpacing: 12px;
 
   .controls-submenu {
-    @include typography.list-unstyled;
     position: absolute;
     z-index: functions.z-stack(controls);
 

diff --git a/components/explorer/SourceDetails/_styles.scss b/components/explorer/SourceDetails/_styles.scss
@@ -51,7 +51,7 @@
     padding: 5px;
     margin-top: -10px;
     margin-right: -10px;
-    background-color: var(--red10);
+    background-color: var(--color-rubin-red-200);
     border-radius: 50%;
   }
 }
@@ -176,7 +176,7 @@
       top: 0;
       bottom: 0;
       width: 6px;
-      background-color: var(--neutral50);
+      background-color: var(--color-rubin-gray-200);
     }
   }
 }
@@ -187,7 +187,7 @@
   min-width: calc(50% - 4px);
   margin-top: 25px;
   font-size: 12px;
-  font-weight: functions.font-weight(bold);
+  font-weight: var(--weight-font-bold);
   color: var(--white);
 }
 

diff --git a/components/explorer/SourceDetails/index.js b/components/explorer/SourceDetails/index.js
@@ -37,7 +37,7 @@ export default function SourceDetails({ data, setData, handleClose }) {
   const modalRef = useRef(null);
   const {
     position,
-    astroImage,
+    astroImage = [],
     type,
     objectId,
     brightness,
@@ -76,6 +76,8 @@ export default function SourceDetails({ data, setData, handleClose }) {
     setActiveAccordion("overview");
   }, [data]);
 
+  const previewImage = astroImage[0] ? astroImage[0]?.url : undefined;
+
   return (
     <div
       className={classnames("source-details-modal-container", {
@@ -104,11 +106,11 @@ export default function SourceDetails({ data, setData, handleClose }) {
             onClick={handleClose}
           />
           <div className="source-details">
-            {astroImage?.length >= 1 && (
+            {previewImage && (
               <div
                 className="source-img"
                 style={{
-                  backgroundImage: `url(${astroImage[0].url})`,
+                  backgroundImage: `url(${previewImage})`,
                 }}
               />
             )}

diff --git a/components/global/FiltersMenu/_styles.scss b/components/global/FiltersMenu/_styles.scss
@@ -56,7 +56,7 @@
     padding: 16px;
     margin: 30px auto 0;
     font-size: 16px;
-    font-weight: functions.font-weight(bold);
+    font-weight: var(--weight-font-bold);
     line-height: 1.6;
     color: var(--white);
     background-color: var(--turquoise85);

diff --git a/components/global/MainMenu/QuickAccess.js b/components/global/MainMenu/QuickAccess.js
@@ -8,7 +8,7 @@ export default function QuickAccess({ route }) {
       <h3 id="settings-label" className="menu-section-heading">
         Quick Access
       </h3>
-      <ul className="list-unstyled quick-access-nav-items">
+      <ul className="quick-access-nav-items">
         <li className="quick-access-nav-item">
           {route === "/explorer" ? (
             <Buttonish

diff --git a/components/global/MainMenu/_styles.scss b/components/global/MainMenu/_styles.scss
@@ -13,11 +13,6 @@
     overflow-y: auto;
   }
 
-  .main-menu-nav,
-  .quick-access-nav {
-    @include typography.list-unstyled;
-  }
-
   .main-menu-nav-items,
   .quick-access-nav-items {
     padding: 12px 0 0 25px;
@@ -36,7 +31,7 @@
       color: var(--white);
       padding: 4px 0;
       font-size: 16px;
-      font-weight: functions.font-weight(bold);
+      font-weight: var(--weight-font-bold);
       line-height: 1;
       border: 0;
     }

diff --git a/components/global/MainMenu/index.js b/components/global/MainMenu/index.js
@@ -54,7 +54,7 @@ export default function MainMenu({ route }) {
             <h3 id="settings-label" className="menu-section-heading">
               Settings
             </h3>
-            <ul className="list-unstyled main-menu-nav-items">
+            <ul className="main-menu-nav-items">
               <li className="main-menu-nav-item">
                 <Button
                   icon="Globe"

diff --git a/components/global/PrimaryHeader/_styles.scss b/components/global/PrimaryHeader/_styles.scss
@@ -12,7 +12,7 @@
   }
 
   &.secondary {
-    background-color: var(--turquoise95);
+    background-color: var(--color-rubin-teal-600);
   }
 
   .close-button,

diff --git a/components/global/SecondaryHeader/_search.scss b/components/global/SecondaryHeader/_search.scss
@@ -14,7 +14,7 @@
     + .icon-text {
       margin-left: 10px;
       font-size: 14px;
-      font-weight: functions.font-weight(light);
+      font-weight: var(--weight-font-normal);
       line-height: 1.5;
     }
   }
@@ -89,7 +89,7 @@
     .text-input-label {
       @include appearance.hidden;
       font-size: 18px;
-      font-weight: functions.font-weight(light);
+      font-weight: var(--weight-font-normal);
       line-height: 1.5;
 
       @include base.respond(functions.break(tablet), min) {

diff --git a/components/global/SecondaryHeader/_styles.scss b/components/global/SecondaryHeader/_styles.scss
@@ -6,8 +6,8 @@
 
 .secondary-header {
   padding: 2px 0;
-  border-top: var(--neutral50) solid 1px;
-  border-bottom: var(--neutral50) solid 1px;
+  border-top: var(--color-rubin-gray-200) solid 1px;
+  border-bottom: var(--color-rubin-gray-200) solid 1px;
 
   @include base.respond(functions.break(tablet), min) {
     margin: 0 auto;
@@ -22,6 +22,7 @@
     max-width: 100%;
     margin: 0 15px;
     transition: max-width 0.2s;
+    list-style: none;
 
     @include base.respond(functions.break(tablet), min) {
       max-width: 330px;
@@ -38,7 +39,7 @@
 
     .icon-text {
       font-size: 14px;
-      font-weight: functions.font-weight(light);
+      font-weight: var(--weight-font-normal);
       line-height: 1.5;
     }
   }

diff --git a/components/guidedExperiences/_styles.scss b/components/guidedExperiences/_styles.scss
@@ -41,7 +41,7 @@
   @include typography.heading-guided-experience;
 
   @include base.respond(functions.break(tablet), min) {
-    font-weight: functions.font-weight(regular);
+    font-weight: var(--weight-font-normal);
   }
 }
 
@@ -82,11 +82,11 @@
   min-width: 48px;
   padding: 12px;
   text-align: center;
-  background-color: var(--red10);
+  background-color: var(--color-rubin-red-200);
 
   .count-label {
     font-size: 10px;
-    font-weight: functions.font-weight(regular);
+    font-weight: var(--weight-font-normal);
     line-height: 1.6;
     color: var(--white);
   }
@@ -97,7 +97,7 @@
     top: calc(100% - 1px);
     width: 0;
     height: 0; // no height, no content, just border
-    border-top: 15px solid var(--red10); // angle degree, reduce to reduce degree of angles
+    border-top: 15px solid var(--color-rubin-red-200); // angle degree, reduce to reduce degree of angles
   }
 
   .angle-right {
@@ -185,7 +185,7 @@
     .duration,
     .complexity {
       margin-top: 4px;
-      font-weight: functions.font-weight(bold);
+      font-weight: var(--weight-font-bold);
       line-height: 1.6;
       color: var(--white);
 

diff --git a/components/layouts/GuidedExperience/index.js b/components/layouts/GuidedExperience/index.js
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import PropTypes from "prop-types";
 import useResizeObserver from "use-resize-observer";
 import NavLink from "@/primitives/NavLink";

diff --git a/components/primitives/Accordion/_styles.scss b/components/primitives/Accordion/_styles.scss
@@ -11,6 +11,15 @@
   &.is-expanded + .accordion {
     border-top: 0;
   }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+  }
 }
 
 .accordion-toggle {
@@ -23,7 +32,7 @@
 
   .accordion-title {
     font-size: 12px;
-    font-weight: functions.font-weight(bold);
+    font-weight: var(--weight-font-bold);
     color: var(--black);
   }
 

diff --git a/components/primitives/Checkbox/_styles.scss b/components/primitives/Checkbox/_styles.scss
@@ -21,7 +21,7 @@
 
   .checkbox-label {
     font-size: 16px;
-    font-weight: functions.font-weight(bold);
+    font-weight: var(--weight-font-bold);
     line-height: 1.6;
     color: var(--white);
   }

diff --git a/components/primitives/Menu/_styles.scss b/components/primitives/Menu/_styles.scss
@@ -82,7 +82,7 @@
 
   .menu-section {
     padding-top: 20px;
-    border-top: 1px solid var(--neutral50);
+    border-top: 1px solid var(--color-rubin-gray-200);
 
     + .menu-section {
       margin-top: 50px;

diff --git a/components/primitives/Radio/_styles.scss b/components/primitives/Radio/_styles.scss
@@ -21,7 +21,7 @@
 
   .radio-label {
     font-size: 16px;
-    font-weight: functions.font-weight(bold);
+    font-weight: var(--weight-font-bold);
     line-height: 1.6;
     color: var(--white);
   }