Changed some components classes to use new theme

client/package.json

@@ -26,8 +26,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "eject": "react-scripts eject"
-    "postbuild": "purgecss --css build/static/css/*.css --content build/index.html build/static/js/*.js --output build/static/css"
   },
   "eslintConfig": {
     "extends": [

client/src/components/Snippets/SnippetCard.tsx

@@ -51,7 +51,7 @@ export const SnippetCard = (props: Props): JSX.Element => {
           >
             <Button
               text='View'
-              color='dark'
+              color='secondary'
               small
               outline
               classes='me-2'
@@ -60,7 +60,12 @@ export const SnippetCard = (props: Props): JSX.Element => {
               }}
             />
           </Link>
-          <Button text='Copy code' color='dark' small handler={copyHandler} />
+          <Button
+            text='Copy code'
+            color='secondary'
+            small
+            handler={copyHandler}
+          />
         </div>
       </div>
     </Card>

client/src/components/Snippets/SnippetCode.tsx

@@ -8,7 +8,7 @@ export const SnippetCode = (props: Props): JSX.Element => {
       <textarea
         className='form-control'
         id='code'
-        rows={13}
+        rows={16}
         value={props.code}
         disabled
       ></textarea>

client/src/components/Snippets/SnippetDetails.tsx

@@ -66,7 +66,7 @@ export const SnippetDetails = (props: Props): JSX.Element => {
       <div>
         {tags.map((tag, idx) => (
           <span className='me-2' key={idx}>
-            <Badge text={tag} color='dark' />
+            <Badge text={tag} color='light' />
           </span>
         ))}
       </div>
@@ -76,7 +76,7 @@ export const SnippetDetails = (props: Props): JSX.Element => {
       <div className='d-grid g-2' style={{ rowGap: '10px' }}>
         <Button
           text='Edit'
-          color='dark'
+          color='secondary'
           small
           outline
           handler={() => {
@@ -94,7 +94,12 @@ export const SnippetDetails = (props: Props): JSX.Element => {
           outline
           handler={() => deleteSnippet(id)}
         />
-        <Button text='Copy code' color='dark' small handler={copyHandler} />
+        <Button
+          text='Copy code'
+          color='secondary'
+          small
+          handler={copyHandler}
+        />
       </div>
     </Card>
   );

client/src/components/Snippets/SnippetForm.tsx

@@ -183,7 +183,7 @@ export const SnippetForm = (props: Props): JSX.Element => {
             <div className='d-grid'>
               <Button
                 text={`${inEdit ? 'Update snippet' : 'Create snippet'}`}
-                color='dark'
+                color='secondary'
                 type='submit'
               />
             </div>

client/src/components/Snippets/SnippetPin.tsx

@@ -15,9 +15,9 @@ export const SnippetPin = (props: Props): JSX.Element => {
   return (
     <div onClick={() => toggleSnippetPin(id)} className='cursor-pointer'>
       {isPinned ? (
-        <Icon path={mdiPin} size={0.8} color='#212529' />
+        <Icon path={mdiPin} size={0.8} color='#20c997' />
       ) : (
-        <Icon path={mdiPinOutline} size={0.8} color='#9a9a9a' />
+        <Icon path={mdiPinOutline} size={0.8} color='#ced4da' />
       )}
     </div>
   );

client/src/components/UI/EmptyState.tsx

@@ -2,14 +2,14 @@ import { Link } from 'react-router-dom';
 
 export const EmptyState = (): JSX.Element => {
   const editorLink = (
-    <Link to='/editor' className='fw-bold text-decoration-none text-dark'>
+    <Link to='/editor' className='fw-bold text-success text-decoration-none'>
       <span>editor</span>
     </Link>
   );
 
   return (
     <div className='col-12 d-flex flex-column align-items-center'>
-      <h4 className='text-muted'>You currently don't have any snippets</h4>
+      <h4>You currently don't have any snippets</h4>
       <p>Go to the {editorLink} and create one</p>
     </div>
   );

client/src/components/UI/Layout.tsx

@@ -5,7 +5,7 @@ interface Props {
 export const Layout = (props: Props): JSX.Element => {
   return (
     <div className='container-lg px-5'>
-      <div className='row pt-4'>{props.children}</div>
+      <div className='row py-4'>{props.children}</div>
     </div>
   );
 };

client/src/components/UI/PageHeader.tsx

@@ -19,7 +19,7 @@ export const PageHeader = <T,>(props: Props<T>): JSX.Element => {
               pathname: prevDest,
               state: prevState
             }}
-            className='text-decoration-none text-dark'
+            className='text-decoration-none text-light'
           >
             &lt;- Go back
           </Link>

client/src/containers/Home.tsx

@@ -19,7 +19,7 @@ export const Home = (): JSX.Element => {
           {snippets.some(s => s.isPinned) && (
             <Fragment>
               <PageHeader title='Pinned snippets' />
-              <div className='col-12 mb-3'>
+              <div className='col-12 mt-3'>
                 <SnippetGrid snippets={snippets.filter(s => s.isPinned)} />
               </div>
             </Fragment>

client/src/containers/Snippets.tsx

@@ -44,6 +44,8 @@ export const Snippets = (): JSX.Element => {
                 <span>Total</span>
                 <span>{snippets.length}</span>
               </div>
+              <hr />
+
               <h5 className='card-title'>Filter by tags</h5>
               <Fragment>
                 {tagCount.map((tag, idx) => {
@@ -53,7 +55,7 @@ export const Snippets = (): JSX.Element => {
                     <div
                       key={idx}
                       className={`d-flex justify-content-between cursor-pointer ${
-                        isActiveFilter && 'text-dark fw-bold'
+                        isActiveFilter && 'text-success'
                       }`}
                       onClick={() => filterHandler(tag.name)}
                     >
@@ -66,7 +68,7 @@ export const Snippets = (): JSX.Element => {
               <div className='d-grid mt-3'>
                 <Button
                   text='Clear filters'
-                  color='dark'
+                  color='secondary'
                   small
                   outline
                   handler={clearFilterHandler}