Make annotations look nicer

acmucsd · Sep 29, 2024 · c2f963e · c2f963e
1 parent 2d42ed6
commit c2f963e
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 18 deletions.
diff --git a/src/components/events/EventCard/style.module.scss b/src/components/events/EventCard/style.module.scss
@@ -7,8 +7,6 @@
   flex-direction: column;
   height: fit-content;
   outline: 0 solid var(--theme-elevated-stroke);
-  -ms-overflow-style: none;
-  overflow-x: hidden;
   padding: 0;
   position: relative;
   text-align: left;
@@ -56,8 +54,10 @@
 
   .image {
     aspect-ratio: 1920 / 1080;
+    border-top-left-radius: 9px;
+    border-top-right-radius: 9px;
     flex-shrink: 0;
-    overflow: none;
+    overflow: hidden;
     position: relative;
     width: 100%;
   }

diff --git a/src/components/onboarding/AnnotatedSite/index.tsx b/src/components/onboarding/AnnotatedSite/index.tsx
@@ -166,8 +166,11 @@ const BadgeAnnotation = ({ children }: PropsWithChildren) => {
     <div className={styles.annotationWrapper}>
       {children}
       <div className={styles.annotation}>
-        Each event is categorized under one of the ACM communities and tagged with the number of
-        points you can earn from attending.
+        <div className={styles.annotationLine} />
+        <Typography variant="h5/regular" component="p" className={styles.annotationContent}>
+          Each event is categorized under one of the ACM communities and tagged with the number of
+          points you can earn from attending.
+        </Typography>
       </div>
     </div>
   );
@@ -180,7 +183,7 @@ const Events = () => {
         Events
       </Typography>
       <EventFilter
-        className={`${styles.desktopOnly} ${styles.fadeOut}`}
+        className={`${styles.hideOnMobile} ${styles.fadeOut}`}
         filters={{
           search: DEFAULT_FILTER_STATE.search,
           communityFilter: DEFAULT_FILTER_STATE.community,
@@ -210,7 +213,10 @@ const CostAnnotation = ({ children }: PropsWithChildren) => {
     <div className={styles.annotationWrapper}>
       {children}
       <div className={styles.annotation}>
-        You need to collect the listed number of points to make the purchase.
+        <div className={styles.annotationLine} />
+        <Typography variant="h5/regular" component="p" className={styles.annotationContent}>
+          You need to collect the listed number of points to make the purchase.
+        </Typography>
       </div>
     </div>
   );

diff --git a/src/components/onboarding/AnnotatedSite/style.module.scss b/src/components/onboarding/AnnotatedSite/style.module.scss
@@ -16,13 +16,15 @@
     }
 
     @media (max-width: vars.$breakpoint-lg) {
-      justify-content: center;
-
       > * {
         flex: unset;
       }
     }
 
+    @media (max-width: vars.$breakpoint-md) {
+      justify-content: center;
+    }
+
     .annotationWrapper {
       animation: annotation-highlight 0.5s 1s forwards;
       border: 2px solid transparent;
@@ -32,14 +34,57 @@
       position: relative;
       transform-origin: left;
       width: fit-content;
+      z-index: 5;
 
       .annotation {
+        --offset: translateX(-1rem);
+        --clip-begin: xywh(100% 0% 0% 100%);
+        align-items: flex-end;
         animation: annotation-appear 0.5s 1.5s backwards;
-        bottom: 100%;
-        left: 0;
+        bottom: 0;
+        display: flex;
+        gap: 0.5rem;
+        left: 100%;
         position: absolute;
         transform: scale(calc(1 / 1.2));
+        transform-origin: bottom left;
         white-space: pre-wrap;
+
+        .annotationLine {
+          animation: annotation-line-appear 0.5s 1.5s backwards;
+          background-color: #ffdc24;
+          flex: none;
+          height: 2px;
+          margin-bottom: 0.5rem;
+          width: 15rem;
+        }
+
+        .annotationContent {
+          width: 15rem;
+        }
+
+        @media (max-width: vars.$breakpoint-md) {
+          --offset: translateY(1rem);
+          --clip-begin: xywh(0% 0% 100% 0%);
+          align-items: flex-start;
+          bottom: 100%;
+          flex-direction: column-reverse;
+          gap: 0;
+          left: 0;
+
+          .annotationLine {
+            height: 5rem;
+            margin-bottom: 0;
+            margin-left: 0.5rem;
+            width: 2px;
+          }
+
+          .annotationContent {
+            background-color: rgba(0, 0, 0, 0.8);
+            border-radius: 0.5rem;
+            padding: 0.5rem;
+          }
+        }
       }
     }
   }
@@ -53,6 +98,12 @@
       display: none;
     }
   }
+
+  .hideOnMobile {
+    @media (max-width: vars.$breakpoint-md) {
+      display: none;
+    }
+  }
 }
 
 @keyframes fade-out {
@@ -61,7 +112,7 @@
   }
 
   to {
-    opacity: 0.3;
+    opacity: 0.1;
   }
 }
 
@@ -82,11 +133,21 @@
 @keyframes annotation-appear {
   from {
     opacity: 0;
-    transform: translateY(1rem) scale(calc(1 / 1.2));
+    transform: var(--offset) scale(calc(1 / 1.2));
   }
 
   to {
     opacity: 1;
     transform: scale(calc(1 / 1.2));
   }
 }
+
+@keyframes annotation-line-appear {
+  from {
+    clip-path: var(--clip-begin);
+  }
+
+  to {
+    clip-path: xywh(0% 0% 100% 100%);
+  }
+}
diff --git a/src/components/onboarding/AnnotatedSite/style.module.scss.d.ts b/src/components/onboarding/AnnotatedSite/style.module.scss.d.ts
@@ -1,10 +1,14 @@
 export type Styles = {
   annotation: string;
   annotationAppear: string;
+  annotationContent: string;
   annotationHighlight: string;
+  annotationLine: string;
+  annotationLineAppear: string;
   annotationWrapper: string;
   desktopOnly: string;
   fadeOut: string;
+  hideOnMobile: string;
   items: string;
   page: string;
 };

diff --git a/src/components/store/ItemCard/style.module.scss b/src/components/store/ItemCard/style.module.scss
@@ -1,15 +1,14 @@
 @use 'src/styles/vars.scss' as vars;
 
 .itemCard {
-  background-color: var(--theme-elevated-background);
-  border: 1px solid var(--theme-shadow);
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 4px var(--theme-shadow);
   display: inline-flex;
-  overflow: hidden;
   position: relative;
 
   .linkWrapper {
+    background-color: var(--theme-elevated-background);
+    border: 1px solid var(--theme-shadow);
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 4px var(--theme-shadow);
     display: flex;
     flex: auto;
     flex-direction: column;
@@ -23,6 +22,9 @@
 
   .imageWrapper {
     background-color: var(--theme-surface-1);
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+    overflow: hidden;
     // Enforce a square image while allowing the card to be squished
     padding-bottom: 100%;
     position: relative;