🐛 Style bug fixes

src/plays/password-generator/PasswordGenerator.jsx

@@ -105,7 +105,7 @@ function PasswordGenerator(props) {
   return (
     <div className='play-details'>
       <PlayHeader play={play} />
-      <div className='play-details-body'>
+      <div className='play-details-body password-generator'>
         {/* Your Code Starts Here */}
         <div className='main'>
           <h1 className='title'>Password Generator</h1>
@@ -171,7 +171,7 @@ function PasswordGenerator(props) {
               </button>
             </div>
             <div>
-              <button onClick={generateHander} className='generate'>
+              <button onClick={generateHander} className='generate-pwd'>
                 Generate Password
               </button>
             </div>

src/plays/password-generator/password-generator-style.css

@@ -1,28 +1,28 @@
 
 
-.main {
+.password-generator .main {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 }
 
-.title {
+.password-generator .title {
     text-align: center;
 }
 
-.section {
+.password-generator .section {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }
 
-.section > div:nth-of-type(2) {
+.password-generator .section > div:nth-of-type(2) {
     position: relative;
     /* background-color: black; */
 }
 
-.copy-button {
+.password-generator .copy-button {
     position: absolute;
     right: 0;
     top: 0;
@@ -39,19 +39,19 @@
     transition: 100ms;
 }
 
-.copy-button:hover {
+.password-generator .copy-button:hover {
     background-color: #135088;
     border: 2px solid #135088;
     border-left: none;
 }
 
-.copid {
+.password-generator .copid {
     background-color: #135088;
     border: 2px solid #135088;
     border-left: none;
 }
 
-.section > div:nth-of-type(1) {
+.password-generator .section > div:nth-of-type(1) {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
@@ -61,7 +61,7 @@
     margin: 25px 0;
 }
 
-.password-input {
+.password-generator .password-input {
     padding: 10px;
     outline: none;
     border: 2px solid #ccc;
@@ -74,7 +74,7 @@
 }
 
 
-.generate {
+.password-generator .generate-pwd {
     padding: 10px 1rem;
     outline: none;
     font-size: 1.5rem;
@@ -85,13 +85,14 @@
     cursor: pointer;
     border-radius: 5px;
     transition: 100ms;
+    margin: 1rem 0 0 0;
 }
 
-.generate:hover {
+.password-generator .generate-pwd:hover {
     background: rgb(0,128,0, 1);
 }
 
-.checkbox-comp {
+.password-generator .checkbox-comp {
     padding: 0;
     margin: 0;
     width: 100%;
@@ -100,38 +101,38 @@
     justify-content: space-between;
 }
 
-.checkbox {
+.password-generator .checkbox {
     width: 20px;
     height: 20px;
     float: right;
 }
 
-.select {
+.password-generator .select {
     width: 45px;
     height: 25px;
     font-size: 1rem;
     float: right;
     margin: 0;
 }
 
-.error {
+.password-generator .error {
     color: red;
     font-size: 1rem;
     text-align: center;
 }
 
 @media screen and (max-width: 600px) {
-    .section > div:nth-of-type(1) {
+    .password-generator .section > div:nth-of-type(1) {
         grid-template-columns: 1fr;
         grid-template-rows: 1fr;
         width: 100%;
     }
 
-    .password-input {
+    .password-generator .password-input {
         font-size: 1rem;
         width: 100%;
     }
-    .copy-button {
+    .password-generator .copy-button {
         padding: 0 5px;
         font-size: 16px;
     }

src/plays/random-meme-generator/RandomMemeGenerator.jsx

@@ -54,7 +54,7 @@ function RandomMemeGenerator(props) {
             {meme.url === null || meme.url === undefined ? <FaSyncAlt className={"loading"}></FaSyncAlt> : <img className="meme" src={meme.url} alt="meme" />}
           </div>
 
-          <div className="generate">
+          <div className="generate-meme">
             <button className="btn generate-btn" onClick={() => getMeme()}>Generate <FaSyncAlt className={`${isLoading && 'loading'}`}></FaSyncAlt></button>
           </div>
           {/* Your Code Ends Here */}

src/plays/random-meme-generator/random-meme-generator.css

@@ -18,7 +18,7 @@
     margin: 2rem 0;
 }
 
-.generate {
+.generate-meme {
     width: 100%;
     display: flex;
     justify-content: center;

src/plays/react-todo-app/ReactTodoApp.jsx

@@ -50,7 +50,7 @@ function ReactTodoApp(props) {
         <div className="play-details-body">
           {/* Your Code Starts Here */}
           <div className="todo-play-body">
-            <div className="top">
+            <div className="todo-top-banner">
               <h1>Todo List</h1>
             </div>
             <Input todos={todos} setTodos={setTodos} setInput={setInput} input={input} setStatus={setStatus} />

src/plays/react-todo-app/components/Input.jsx

@@ -22,12 +22,12 @@ const Input = ({ input, setInput, todos, setTodos, setStatus }) => {
     }
 
     return (
-        <form className='form'>
+        <form className='react-todo-form'>
             <input onChange={inputHandler} value={input} type="text" className="todo-input" />
             <button onClick={submitHandler} className="todo-button" type="submit">
                 <FaPlusSquare />
             </button>
-            <div className="select">
+            <div className="select-todo">
                 <select onChange={statusHandler} name="todos" className="filter-todo options">
                     <option value="all">All</option>
                     <option value="completed">Completed</option>

src/plays/react-todo-app/react-todo.css

@@ -7,34 +7,34 @@
     font-family: "Poppins", sans-serif;
 }
 
-.top {
+.todo-top-banner {
     font-size: 2rem;
 }
 
-.top,
-.form {
+.todo-top-banner,
+.react-todo-form {
     min-height: 20vh;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-.form input,
-.form button {
+.react-todo-form input,
+.react-todo-form button {
     padding: 0.5rem;
     font-size: 1.2rem;
     border: none;
     background: white;
 }
 
-.form button {
+.react-todo-form button {
     color: #ff6f47;
     background: #f7fffe;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
-.form button:hover {
+.react-todo-form button:hover {
     background: #ff6f47;
     color: white;
 }
@@ -103,7 +103,7 @@
 }
 
 /*CUSTOM SELECTOR */
-.options {
+.select-todo .options {
     -webkit-appearance: none;
     -moz-appearance: none;
     -ms-appearance: none;
@@ -112,29 +112,26 @@
     box-shadow: none;
     border: 0 !important;
     background-image: none;
+    color: #ff6f47;
+    font-family: "Poppins", sans-serif;
+    cursor: pointer;
+    width: 12rem;
 }
 
 /* Custom Select */
-.select {
+.select-todo {
     margin: 1rem;
     position: relative;
     overflow: hidden;
 }
 
-.options {
-    color: #ff6f47;
-    font-family: "Poppins", sans-serif;
-    cursor: pointer;
-    width: 12rem;
-}
-
 /* Arrow */
-.select::after {
+.select-todo::after {
     content: "\25BC";
     position: absolute;
     top: 0;
     right: 0;
-    padding: 1rem;
+    padding: 0.75rem;
     background: #ff6f47;
     cursor: pointer;
     pointer-events: none;