fix generic button style

style settings tables
larinam · Aug 23, 2024 · eb8d877 · eb8d877
1 parent 64c4653
commit eb8d877
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 6 deletions.
diff --git a/frontend/src/components/CalendarComponent.css b/frontend/src/components/CalendarComponent.css
@@ -7,7 +7,7 @@
     width: 100%;
     background-color: white;
     z-index: 1000;
-    padding: 10px;
+    padding: 7px;
 }
 
 /* Additional styles to ensure other elements (like buttons or icons) are properly aligned */
@@ -36,7 +36,7 @@
     position: absolute;
     left: 0;
     right: 0;
-    bottom: -10px; /* Adjust based on your design */
+    bottom: -13px;
     height: 20px; /* Height of the gradient effect */
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
 }

diff --git a/frontend/src/components/MonthSelector.css b/frontend/src/components/MonthSelector.css
@@ -1,6 +1,8 @@
 .monthSelector {
     margin: 0px 10px;
     justify-content: left;
+    display: inline-flex;
+    align-items: center;
 }
 
 .monthDisplay {

diff --git a/frontend/src/components/settings/DayTypes.jsx b/frontend/src/components/settings/DayTypes.jsx
@@ -56,7 +56,7 @@ const DayTypes = () => {
     return (
         <div className="settingsDayTypesContainer">
             <h2>Day Types Settings</h2>
-            <table>
+            <table className="settingsTable">
                 <thead>
                 <tr>
                     <th>Name</th>

diff --git a/frontend/src/components/settings/InviteManagement.jsx b/frontend/src/components/settings/InviteManagement.jsx
@@ -39,7 +39,7 @@ const InviteManagement = ({ refreshTrigger }) => {
     return (
       <div className="inviteManagementContainer">
           <h3>Not accepted Invites</h3>
-          <table>
+          <table className="settingsTable">
               <thead>
               <tr>
                   <th>Email</th>

diff --git a/frontend/src/components/settings/SettingsComponent.css b/frontend/src/components/settings/SettingsComponent.css
@@ -34,3 +34,31 @@
 .closeButton {
     margin: 10px 0 10px 0;
 }
+
+/*Table styles*/
+.settingsTable {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 16px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    color: #24292f;
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.settingsTable th,
+.settingsTable td {
+    padding: 8px 16px;
+    text-align: left;
+    vertical-align: top;
+    border: 1px solid #d0d7de;
+}
+
+.settingsTable th {
+    background-color: #f6f8fa;
+    font-weight: 600;
+}
+
+.settingsTable tbody tr:hover {
+    background-color: #f6f8fa;
+}
diff --git a/frontend/src/components/settings/UserManagement.jsx b/frontend/src/components/settings/UserManagement.jsx
@@ -70,7 +70,7 @@ const UserManagement = () => {
           <div className="userManagementButtons">
               <button onClick={handleInviteUserClick}>Invite User</button>
           </div>
-          <table>
+          <table className="settingsTable">
               <thead>
               <tr>
                   <th>Name</th>

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -3,7 +3,7 @@ button {
     border-radius: 6px;
     border: none;
     cursor: pointer;
-    padding: 3px;
+    padding: 6px;
     margin: 10px;
 }