diff --git a/package.json b/package.json index 23b182eaa1..d30223d8e1 100644 --- a/package.json +++ b/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" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000000..33ad091d26 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/src/App.css b/src/App.css index 7e2e761558..6455a15886 100644 --- a/src/App.css +++ b/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; diff --git a/src/common/home/home.css b/src/common/home/home.css index f70818998e..85936e24bd 100644 --- a/src/common/home/home.css +++ b/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); diff --git a/src/common/playideas/playIdeas.css b/src/common/playideas/playIdeas.css index ae1080250f..b93bb80384 100644 --- a/src/common/playideas/playIdeas.css +++ b/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; diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css index ede8d61687..430a760513 100644 --- a/src/common/playlists/playlist.css +++ b/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 { diff --git a/src/common/search/search.css b/src/common/search/search.css index a6caee382a..77ac8f2a90 100644 --- a/src/common/search/search.css +++ b/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 { diff --git a/src/plays/analog-clock/AnalogClock.css b/src/plays/analog-clock/AnalogClock.css index 59a703ad35..7856da8d9a 100644 --- a/src/plays/analog-clock/AnalogClock.css +++ b/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; diff --git a/src/plays/counter/counter.css b/src/plays/counter/counter.css index 6072573d2d..73cb5dcba1 100644 --- a/src/plays/counter/counter.css +++ b/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; diff --git a/src/plays/dynamic-routes/dynamicRoutes.css b/src/plays/dynamic-routes/dynamicRoutes.css index 8a549c2d85..8b979fbc9f 100644 --- a/src/plays/dynamic-routes/dynamicRoutes.css +++ b/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 { diff --git a/src/plays/expanding-cards/ExpandingCards.css b/src/plays/expanding-cards/ExpandingCards.css index 6fca6f3c7e..404d087eb9 100644 --- a/src/plays/expanding-cards/ExpandingCards.css +++ b/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; diff --git a/src/plays/memory-game/NetlifyCardGame.jsx b/src/plays/memory-game/NetlifyCardGame.jsx index 7cd08d2e50..05de67377d 100644 --- a/src/plays/memory-game/NetlifyCardGame.jsx +++ b/src/plays/memory-game/NetlifyCardGame.jsx @@ -201,8 +201,8 @@ function NetlifyCardGame(props) {
{/* Your Code Starts Here */} -

-

How to Play?

+

+ How to Play?

diff --git a/src/plays/memory-game/NetlifyCardGame.scss b/src/plays/memory-game/NetlifyCardGame.scss index 823fb39fdd..e21aad4664 100644 --- a/src/plays/memory-game/NetlifyCardGame.scss +++ b/src/plays/memory-game/NetlifyCardGame.scss @@ -10,6 +10,7 @@ $memory-game-single-item-hover-bg: url("./question1.png"); display: flex; justify-content: center; align-items: center; + max-width: unset; } .memory-game .guide { @@ -17,6 +18,9 @@ $memory-game-single-item-hover-bg: url("./question1.png"); padding: 0; margin: 0; color: #1f6ed4; + font-size: 1.5rem; + font-weight: var(--fw-bold); + cursor: pointer; p { cursor: pointer; diff --git a/src/plays/memory-game/modal.scss b/src/plays/memory-game/modal.scss index 24010f7a7c..423df10314 100644 --- a/src/plays/memory-game/modal.scss +++ b/src/plays/memory-game/modal.scss @@ -38,19 +38,23 @@ .content { margin: 0 2rem; - padding-bottom: 1rem; + padding: 2rem; + .text { + text-align: center; + font-size: 1.6rem; + font-weight: bold; } p { + margin: 0.6rem 0 1rem 0; text-align: center; } .guide-image { - width: 70%; display: block; - aspect-ratio: 16/9; - height: 100%; margin: 0 auto; + max-width: 100%; + height: auto; } .button-section { diff --git a/src/plays/movies/movies.css b/src/plays/movies/movies.css index 3cc0461e85..362cf4823f 100644 --- a/src/plays/movies/movies.css +++ b/src/plays/movies/movies.css @@ -31,6 +31,8 @@ li { } .movie img { + max-width: unset; + height: unset; align-self: center; } diff --git a/src/plays/org-tree/basic-tree.css b/src/plays/org-tree/basic-tree.css index 07ffbe4eb8..cd275537d3 100644 --- a/src/plays/org-tree/basic-tree.css +++ b/src/plays/org-tree/basic-tree.css @@ -4,6 +4,16 @@ align-items: center; } +.org-tree h2 { + margin: 1rem 0 1.6rem 0; + font-size: 1.5rem; + font-weight: bold; +} + +.org-tree p { + margin: 1rem 0; +} + .org-tree .about { max-width: 40rem; } diff --git a/src/plays/quizeo/src/components/questions/questions.styles.css b/src/plays/quizeo/src/components/questions/questions.styles.css index 5a4a9afb02..133e5789cd 100644 --- a/src/plays/quizeo/src/components/questions/questions.styles.css +++ b/src/plays/quizeo/src/components/questions/questions.styles.css @@ -20,6 +20,7 @@ .quizeo .category-title{ display: inline-block; position: relative; + margin: 1rem 0; font-size: 2.25rem; line-height: 2.5rem; text-align: center; diff --git a/src/plays/quote-generator/quoteGenerator.css b/src/plays/quote-generator/quoteGenerator.css index 2c4b9cb159..dec1b1effd 100644 --- a/src/plays/quote-generator/quoteGenerator.css +++ b/src/plays/quote-generator/quoteGenerator.css @@ -1,3 +1,8 @@ +.rand-quote-gen h1 { + font-size: 2rem; + font-weight: bold; + margin-bottom: 2rem; +} .rand-quote-gen .play-area { border: none; display: flex; @@ -25,6 +30,7 @@ .rand-quote-gen .play-area .quote-area .page-author { width: 45%; + margin-top: 2rem; display: flex; justify-content: space-between; } diff --git a/src/plays/react-todo-app/react-todo.css b/src/plays/react-todo-app/react-todo.css index 8aaf0b9bfc..f16a105280 100644 --- a/src/plays/react-todo-app/react-todo.css +++ b/src/plays/react-todo-app/react-todo.css @@ -137,18 +137,29 @@ /*CUSTOM SELECTOR */ .select-todo .options { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - outline: 0; - box-shadow: none; - border: 0 !important; - background-image: none; - color: #ff6f47; - font-family: 'Poppins', sans-serif; - cursor: pointer; - width: 12rem; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + outline: 0; + height: 50px; + box-shadow: none; + border: 0 !important; + background-image: none; + color: #ff6f47; + font-family: "Poppins", sans-serif; + cursor: pointer; + width: 12rem; +} + +.todo-input { + height: 50px; +} + +.todo-button { + height: 48px; + width: 40px; + transform: translateX(-100%); } /* Custom Select */ diff --git a/src/plays/registration-form/Registration-form.css b/src/plays/registration-form/Registration-form.css index e9030c30a7..ff3a945a15 100644 --- a/src/plays/registration-form/Registration-form.css +++ b/src/plays/registration-form/Registration-form.css @@ -1,6 +1,12 @@ .registration-form-heading { + font-size: var(--fs-md); + font-weight: var(--fw-bold); + margin: 1rem 0 2rem 0; text-align: center; } +.registration-form.container { + max-width: unset; +} .registration-form .container { width: 90%; margin: auto; diff --git a/src/plays/registration-form/RegistrationForm.jsx b/src/plays/registration-form/RegistrationForm.jsx index d55cec4f33..7d4ae293d2 100644 --- a/src/plays/registration-form/RegistrationForm.jsx +++ b/src/plays/registration-form/RegistrationForm.jsx @@ -207,7 +207,7 @@ function RegistrationForm(props) { ); })}
- +
-
-

Create your Social Card

-

Please fill the form below to create a Social Card for you.

-
- -
- - +
+
+

Create your Social Card

+

Please fill the form below to create a Social Card for you.

- + +
+ + +
+ +
diff --git a/src/plays/social-card/social-card.css b/src/plays/social-card/social-card.css index 46364ce4bd..860d3d05f4 100644 --- a/src/plays/social-card/social-card.css +++ b/src/plays/social-card/social-card.css @@ -1,3 +1,9 @@ +.social-card-body h2 { + margin: 1rem 0 1.4rem 0; + font-size: 1.6rem; + font-weight: bold; +} + .social-card { display: flex; align-items: center; @@ -32,6 +38,10 @@ box-shadow: none; } +.social-card-form .form-group input[type="file"].form-control { + height: auto; +} + .card-details{ margin: 0 0 0 1rem; } diff --git a/src/plays/states/States.jsx b/src/plays/states/States.jsx index 1631c0f5e4..7f0563da8f 100644 --- a/src/plays/states/States.jsx +++ b/src/plays/states/States.jsx @@ -41,7 +41,7 @@ function States(props) {
{/* Your Code Starts Here */} -
+

States - Details about Component

State is an inbuilt object of React which stores data/information diff --git a/src/plays/states/states.css b/src/plays/states/states.css index 88373ce3bf..f8a18076ba 100644 --- a/src/plays/states/states.css +++ b/src/plays/states/states.css @@ -1,3 +1,9 @@ +.states h1 { + margin: 1rem 0 1.6rem 0; + font-size: 2rem; + font-weight: bold; +} + .play-area, .play-area-result{ width: 100%; display: flex; diff --git a/src/plays/tic-tac-toe-game/styles/tic-tac-toe-tj.css b/src/plays/tic-tac-toe-game/styles/tic-tac-toe-tj.css index 2cc5ed5861..8e8919e5f6 100644 --- a/src/plays/tic-tac-toe-game/styles/tic-tac-toe-tj.css +++ b/src/plays/tic-tac-toe-game/styles/tic-tac-toe-tj.css @@ -1,4 +1,6 @@ -.tic-tac-toe-tj .container{ +.tic-tac-toe-tj .container { + width: initial; + max-width: unset; text-align: center; } diff --git a/src/plays/why-react/WhyReact.jsx b/src/plays/why-react/WhyReact.jsx index 0b1aa634b9..f2c792d2f3 100644 --- a/src/plays/why-react/WhyReact.jsx +++ b/src/plays/why-react/WhyReact.jsx @@ -21,18 +21,20 @@ const WhyReact = ({ id }) => {

-

- React is a JavaScript library for building user interfaces. It is - maintained by Facebook and a community of individual - developers and companies. -

+
+

+ React is a JavaScript library for building user interfaces. It is + maintained by Facebook and a community of individual + developers and companies. +

-
    -

    Why React?

    - {reasons.map((reason, index) => { - return
  • {reason}
    • ; - })} -
+
    +

    Why React?

    + {reasons.map((reason, index) => { + return
  • {reason}
    • ; + })} +
+
diff --git a/src/plays/why-react/why-react.css b/src/plays/why-react/why-react.css index 2258fe2639..f8215129a5 100644 --- a/src/plays/why-react/why-react.css +++ b/src/plays/why-react/why-react.css @@ -1,4 +1,14 @@ -.heading { - font-size: 1.5em; +.why-react .heading { + font-size: 1.6em; + font-weight: bold; + margin-bottom: 1rem; color: rgb(29, 91, 223) +} + +.why-react .paragraph { + margin-bottom: 1rem; +} + +.why-react .list { + margin: 1rem 0 0 1rem; } \ No newline at end of file diff --git a/src/plays/why-typescript/WhyTypescript.tsx b/src/plays/why-typescript/WhyTypescript.tsx index 31e8784bc2..f0c200c150 100644 --- a/src/plays/why-typescript/WhyTypescript.tsx +++ b/src/plays/why-typescript/WhyTypescript.tsx @@ -17,7 +17,7 @@ function WhyTypescript(props: any) { <>
-
+
{/* Your Code Starts Here */}

Play Details - Why Typescript

diff --git a/src/plays/why-typescript/wizard/index.css b/src/plays/why-typescript/wizard/index.css index 12994fe889..d763688e43 100644 --- a/src/plays/why-typescript/wizard/index.css +++ b/src/plays/why-typescript/wizard/index.css @@ -1,3 +1,7 @@ +.why-typescript h1 { + font-size: 1.6rem; + font-weight: bold; +} .ol-cards, .ol-cards * { diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000000..115da8ea9a --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,9 @@ +module.exports = { + content: [ + "./src/**/*.{js,jsx,ts,tsx}", + ], + theme: { + extend: {}, + }, + plugins: [], +}