Styling additional buttons

karlosos · Jan 6, 2024 · 7603da4 · 7603da4
1 parent ce5cd5a
commit 7603da4
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 11 deletions.
diff --git a/src/app/features/clippings/highlights/HighlightsList.jsx b/src/app/features/clippings/highlights/HighlightsList.jsx
@@ -1,4 +1,4 @@
-import { ChevronLeft } from 'lucide-react';
+import { CalendarClock, ChevronLeft, Highlighter, Timer } from 'lucide-react';
 import React, { useRef } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Pagination } from 'semantic-ui-react';
@@ -10,6 +10,10 @@ import {
     Content,
     Footer,
     MainHeader,
+    Pill,
+    PillGlossy,
+    PillSeparator,
+    PillSeparatorGlossy,
     Title,
     Wrapper,
 } from './HighlightsList.style';
@@ -46,16 +50,30 @@ const HighlightsList = ({ title, highlights, bookInfoVisible }) => {
     return (
         <Wrapper ref={wrapperRef}>
             <MainHeader>
-                {booksListPage && (
-                    <AdditionalButtons>
+                <AdditionalButtons>
+                    {booksListPage && (
                         <BackButton
                             onClick={() => navigate(`/?page=${booksListPage}`)}
                         >
-                            <ChevronLeft />
+                            <ChevronLeft size={16} />
                             Go back
                         </BackButton>
-                    </AdditionalButtons>
-                )}
+                    )}
+                    <Pill>
+                        <CalendarClock size={16} />
+                        2022-03-17
+                        <PillSeparator />
+                        2023-06-21
+                    </Pill>
+                    <Pill>
+                        <Highlighter size={16} />
+                        13 highlights
+                    </Pill>
+                    <Pill>
+                        <Timer size={16} />
+                        30 minutes
+                    </Pill>
+                </AdditionalButtons>
                 <Title as="h1">{title}</Title>
             </MainHeader>
             <Content>

diff --git a/src/app/features/clippings/highlights/HighlightsList.style.jsx b/src/app/features/clippings/highlights/HighlightsList.style.jsx
@@ -47,21 +47,45 @@ export const Footer = styled.div`
     user-select: none;
 `;
 
-export const BackButton = styled.div`
+export const Pill = styled.div`
     background: #ffffff;
     color: #4d5d50;
     border: 1px solid #f2f6f3;
 
-    border-radius: 4px;
+    border-radius: 8px;
     display: flex;
     align-items: center;
     gap: 4px;
     justify-content: center;
+    font-size: 12px;
 
-    padding: 4px 16px;
+    padding: 2px 8px;
+    height: 26px;
+`;
+
+export const PillGlossy = styled(Pill)`
+    background: linear-gradient(180deg, #6dd5be 0%, #558f83 100%);
+    box-shadow: 0px 3px 4.2px -2px #6aaea0, inset 0px 2px 1.6px -1px #8cfae2;
+    border-radius: 8px;
+    color: white;
+    border: 1px solid #56887d;
+    font-weight: 500;
+`;
+
+export const PillSeparator = styled.div`
+    height: 24px;
+    margin-top: -1px;
+    margin-bottom: -1px;
+    width: 1px;
+    border-left: 1px solid #f2f6f3;
+`;
+
+export const PillSeparatorGlossy = styled(PillSeparator)`
+    border-left: 1px solid #56887d;
+`;
 
+export const BackButton = styled(PillGlossy)`
     &:hover {
-        background: #fafefc;
         cursor: pointer;
     }
 `;
@@ -74,4 +98,5 @@ export const BackButtonIcon = styled.div`
 
 export const AdditionalButtons = styled.div`
     display: flex;
-`
+    gap: 8px;
+`;