Tailwind fixes

package.json

@@ -58,8 +58,11 @@
     ]
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.13",
     "puppeteer": "^13.7.0",
     "react-snap": "^1.23.0",
+    "tailwindcss": "^3.0.24",
     "typescript": "^4.6.4"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.css

@@ -1,4 +1,8 @@
 /* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Raleway:wght@900&display=swap'); */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Raleway:wght@900&display=swap');
 
 .text-center {
@@ -17,6 +21,10 @@
   border-width: 0;
 }
 
+button, input, optgroup, select, textarea {
+  color: initial;
+}
+
 :root {
   --color-brand-primary: #00f2fe;
   --color-brand-primary-rgb: 0, 244, 252;

src/common/home/home.css

@@ -22,6 +22,7 @@
 }
 
 .app-home-body .body-title {
+    margin-top: 3.2rem;
     margin-bottom: 1rem;
     font-family: var(--ff-accent);
     font-size: var(--fs-xxl);
@@ -40,6 +41,7 @@
     }
 
     .app-home-body .body-title {
+        margin-top: 1rem;
         margin-left: 1rem;
         margin-right: 1rem;
     }
@@ -310,6 +312,10 @@
     text-align: center;
 }
 
+.home-ideas .icon {
+    margin: 0 auto 1rem auto;
+}
+
 .home-ideas .ideas-title {
     margin: 0 0 3rem 0;
     font-family: var(--ff-accent);

src/common/playideas/playIdeas.css

@@ -20,11 +20,13 @@
     flex-direction: row;
     align-items: center;
     grid-gap: 0.4rem;
+    font-weight: var(--fw-bold);
+    font-size: calc(var(--fs-md) * .8);
 }
 
 .playideas-header .header-title .header-title-badge {
     background: var(--color-brand-primary);
-    font-size: var(--fs-sm);
+    font-size: var(--fs-xs);
     font-weight: var(--fw-bold);
     line-height: 1;
     padding: .32rem .4rem;

src/common/playlists/playlist.css

@@ -138,52 +138,6 @@
     transform: translateX(-50%);
 }
 
-/* 
-.list-plays .active a {
-    border: solid 2px rgba(var(--color-neutral-90-rgb), 0.3);
-    background-color: var(--color-brand-primary);
-}
-
-.list-plays .active a:after {
-    display: none;
-}
-
-.list-plays .active a .play-title {    
-    position: absolute;
-    top: 1.2rem;
-    transform: translateY(0);
-    padding-bottom: 0;
-    z-index: 1;
-}
-
-.list-plays .active a:hover {
-    cursor: default;
-}
-
-.list-plays .active a:hover .play-title {
-    color: var(--color-neutral-90);
-}
-
-.list-plays .active a .play-status {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    opacity: 1;
-    bottom: 1.6rem;
-    z-index: 1;
-    grid-gap: 0.4rem;
-    line-height: 1;
-    color: var(--color-neutral-90);
-}
-
-.list-plays .active a .play-status .icon {
-    display: none;
-}
-
-.list-plays .active a .play-status .default {
-    display: none;
-}
-*/
 .list-plays a .play-status .current {
     display: none;
 }
@@ -233,6 +187,7 @@
 
 .play-details .play-details-header .header-leftcol-action .action {
     display: block;
+    margin-top: 1px;
 }
 
 .play-details .play-details-header .header-leftcol-action .action .icon {
@@ -422,6 +377,7 @@
 .play-details .play-details-header .header-title {
     margin: 0;
     font-size: var(--fs-md);
+    font-weight: var(--fw-bold);
 }
 
 .play-details .play-details-header .header-desc {
@@ -458,6 +414,45 @@
     overflow-y: auto;
 }
 
+/* .play-details .play-details-body h1 {
+    font-size: var(--fs-lg);
+    font-weight: var(--fw-bold);
+    margin-bottom: .6rem;
+} */
+
+/* .play-details .play-details-body h2 {
+    font-size: var(--fs-md);
+    font-weight: var(--fw-bold);
+    margin-bottom: .6rem;
+} */
+
+/* .play-details .play-details-body p {
+    margin: 1rem 0;
+    font-size: var(--fs-rg);
+} */
+
+.play-details .play-details-body p a {
+    color: blue;
+    text-decoration: underline;
+}
+
+/* .play-details .play-details-body ul {
+    margin: 0;
+} */
+
+/* .play-details .play-details-body img {
+    max-width: unset;
+    height: unset;
+} */
+
+.play-details .play-details-body input[type="text"],
+.play-details .play-details-body input[type="password"],
+.play-details .play-details-body input[type="email"],
+.play-details .play-details-body input[type="datetime-local"] {
+    border: solid 1px var(--color-neutral-50);
+    padding: 0.4rem;
+}
+
 .play-details .header-actions .action {
     position: relative;
     width: 24px;
@@ -472,7 +467,6 @@
     width: auto;
     height: auto;
     text-decoration: none;
-    margin-right: -0.6rem;
 }
 
 .play-details .header-actions .action.badged .badge-count {

src/common/search/search.css

@@ -26,11 +26,12 @@
   width: 100%;
   border: 0;
   border-radius: 2rem;
-  padding: 0.8rem 1.6rem 0.8rem 3rem;
+  padding: 0.64rem 1.6rem 0.64rem 3rem;
+  background-color: rgba(var(--color-brand-primary-rgb), 0.20);
   color: var(--color-neutral-20);
   font-family: var(--ff-default);
   font-size: var(--fs-rg);
-  background-color: rgba(var(--color-brand-primary-rgb), 0.20);
+  line-height: 1;
 }
 
 .search-input .search-input-text:focus,
@@ -73,6 +74,7 @@
 .btn-filter {
   position: relative;
   border: 0;
+  padding: 0 .48rem;
   background-color: transparent;
   cursor: pointer;
 }
@@ -156,6 +158,7 @@
 .modal-filter .modal-filter-header .modal-title {
   margin: 0;
   font-size: var(--fs-md);
+  font-weight: var(--fw-bold);
 }
 
 .modal-filter .modal-filter-body {
@@ -185,14 +188,16 @@
 }
 
 .modal-filter .form-group label {
+  margin: 0.2rem 0;
   color: var(--color-neutral-70);
   font-size: var(--fs-sm);
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-regular);
 }
 
 .modal-filter .form-group .form-control {
+  border: solid 1px var(--color-neutral-40);
   font-size: var(--fs-rg);
-  padding: 0.4rem 0.2rem;
+  padding: 0.4rem 0.3rem;
 }
 
 .modal-filter .form-group .form-control option {

src/plays/analog-clock/AnalogClock.css

@@ -1,5 +1,8 @@
 .clock-play-heading {
   text-align: center;
+  margin: 1rem 0;
+  font-size: 2rem;
+  font-weight: bold;
 }
 .clock {
   max-width: 375px;

src/plays/counter/counter.css

@@ -2,14 +2,31 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 100vw;
+  width: 100%;
+}
+.counter-container h1 {
+  margin: 2rem 0;
+  font-size: var(--fs-lg);
+  font-weight: bold;
 }
+
+.counter-container p {
+  margin-bottom: 1rem;
+}
+
 .counter-desc{
   text-align: center;
 }
 button:hover{
   cursor: pointer;
 }
+
+.counter h2 {
+  font-size: 1.6rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
+
 .input_field {
   display: flex;
   justify-content: center;

src/plays/dynamic-routes/dynamicRoutes.css

@@ -5,11 +5,22 @@
   margin: 50px auto;
 }
 
+.dynamic-routes-container .heading {
+  font-size: 2rem;
+}
+
 .dynamic-routes-container .heading,
 .dynamic-routes-container .sub-heading,
 .dynamic-routes-container .navbar {
   text-align: center;
 }
+
+.dynamic-routes-container .sub-heading {
+  font-size: calc(var(--fs-md) * .8);
+  font-weight: var(--fw-bold);
+  margin: .8rem 0 1.6rem 0;
+}
+
 .dynamic-routes-container .navbar {
   display: flex;
   justify-content: center;
@@ -29,6 +40,11 @@
   margin: 20px;
   text-align: center;
   padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  grid-gap: 1rem;
+  justify-content: space-between;
   border-top-left-radius: 50px;
   border-bottom-right-radius: 50px;
   text-transform: capitalize;
@@ -45,6 +61,7 @@
   border-radius: 10px;
   text-align: center;
   box-shadow: 1px 2px 5px #ccc;
+  color: blue;
 }
 
 .dynamic-routes-container .symbol {

src/plays/expanding-cards/ExpandingCards.css

@@ -3,6 +3,12 @@
   margin: 0 auto;
   text-align: center;
 }
+
+.play-container h1 {
+  font-size: 2rem;
+  font-weight: bold;
+  margin: 1rem 0;
+}
 .card-container {
   width: 100%;
   margin: 0 auto;

src/plays/memory-game/NetlifyCardGame.jsx

@@ -201,8 +201,8 @@ function NetlifyCardGame(props) {
         <PlayHeader play={play} />
         <div className='play-details-body memory-game'>
           {/* Your Code Starts Here */}
-          <h2 className='guide'>
-            <p onClick={toggle}>How to Play?</p>
+          <h2 className='guide' onClick={toggle}>
+            How to Play?
           </h2>
           <div className='container'>
             <div className='App'>

src/plays/memory-game/NetlifyCardGame.scss

@@ -10,13 +10,17 @@ $memory-game-single-item-hover-bg: url("./question1.png");
   display: flex;
   justify-content: center;
   align-items: center;
+  max-width: unset;
 }
 
 .memory-game .guide {
   text-align: center;
   padding: 0;
   margin: 0;
   color: #1f6ed4;
+  font-size: 1.5rem;
+  font-weight: var(--fw-bold);
+  cursor: pointer;
 
   p {
     cursor: pointer;