move Rounded CSS to App styles #101

blahosyl · Aug 7, 2024 · 798c9bf · 798c9bf
1 parent afd293e
commit 798c9bf
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 22 deletions.
diff --git a/src/App.module.css b/src/App.module.css
@@ -85,3 +85,16 @@ figure {
 .Rounded {
   border-radius: 20px;
 }
+
+.RoundedTop {
+  border-radius: 20px 20px 0px 0px !important;
+}
+
+/* rounded corners on smaller objects */
+.LittleRounded {
+  border-radius: 10px;
+}
+
+.LittleRoundedBottom {
+  border-radius: 0px 0px 10px 10px;
+}
diff --git a/src/pages/tasks/Task.js b/src/pages/tasks/Task.js
@@ -14,6 +14,7 @@ import { axiosRes } from "../../api/axiosDefaults";
 import Avatar from "../../components/Avatar";
 import { useCurrentUser } from "../../contexts/CurrentUserContext";
 import styles from "../../styles/Task.module.css";
+import appStyles from "../../App.module.css";
 import { MoreDropdown } from "../../components/MoreDropdown";
 import { ListGroupItem } from "react-bootstrap";
 
@@ -111,12 +112,12 @@ const Task = (props) => {
   return (
     <Card
       className={`${styles.Task}
-      ${styles.Rounded}
+      ${appStyles.Rounded}
     `}
     >
       <Card.Header
         className={`
-          ${styles.RoundedTop}
+          ${appStyles.RoundedTop}
           // set background color depending on task priority
           ${
             priority === String("LOW")
@@ -307,8 +308,8 @@ const Task = (props) => {
                 }
                 // only round top on TaskDetail page
                 ${taskDetail
-                  ? styles.LittleRounded
-                  : styles.LittleRoundedBottom
+                  ? appStyles.LittleRounded
+                  : appStyles.LittleRoundedBottom
                 }
                 // set background color depending on task priority
                 ${

diff --git a/src/styles/Task.module.css b/src/styles/Task.module.css
@@ -20,24 +20,6 @@
   --white: #FFFFFF;
 }
 
-/* rounded corners on bigger objects */
-.Rounded {
-  border-radius: 20px;
-}
-
-.RoundedTop {
-  border-radius: 20px 20px 0px 0px !important;
-}
-
-/* rounded corners on smaller objects */
-.LittleRounded {
-  border-radius: 10px;
-}
-
-.LittleRoundedBottom {
-  border-radius: 0px 0px 10px 10px;
-}
-
 .Task {
     background-color: #ffffff;
     border: 1px solid #dadadf;