css for color blinds

PalisadoesFoundation · Nov 24, 2024 · 8d43aae · 8d43aae
1 parent fb913e1
commit 8d43aae
Show file tree

Hide file tree

Showing 23 changed files with 519 additions and 263 deletions.
diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import styles from './AdvertisementRegister.module.css';
+import styles from '../../../../style/app.module.css';
 import { Button, Form, Modal } from 'react-bootstrap';
 import {
   ADD_ADVERTISEMENT_MUTATION,
@@ -263,7 +263,7 @@ function advertisementRegister({
         </div>
       )}
       <Modal show={show} onHide={handleClose}>
-        <Modal.Header closeButton className={styles.editHeader}>
+        <Modal.Header closeButton>
           {formStatus === 'register' ? (
             <Modal.Title> {t('addNew')}</Modal.Title>
           ) : (
@@ -405,6 +405,7 @@ function advertisementRegister({
           <Button
             variant="secondary"
             onClick={handleClose}
+            className={styles.closeButton}
             data-testid="addonclose"
           >
             {tCommon('close')}
@@ -414,6 +415,7 @@ function advertisementRegister({
               variant="primary"
               onClick={handleRegister}
               data-testid="addonregister"
+              className={styles.addButton}
             >
               {tCommon('register')}
             </Button>

diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css
@@ -1,21 +1,38 @@
+:root {
+  --dropdown-border-color: #555555;
+  --dropdown-text-color: #555555;
+  --dropdown-hover-color: #eff1f7;
+  --grey-bg-color: #eaebef;
+  --subtle-blue-grey: #7c9beb;
+  --subtle-blue-grey-hover: #5f7e91;
+  --input-shadow-color: #dddddd;
+  --delete-button-bg: #f8d6dc;
+  --delete-button-color: #ff4d4f;
+  --search-button-bg: #a8c7fa;
+  --search-button-border: #555555;
+}
+
 .calendar {
   font-family: sans-serif;
   font-size: 1.2rem;
   margin-bottom: 20px;
-  background: rgb(255, 255, 255);
+  background: var(--grey-bg-color);
   border-radius: 10px;
   padding: 5px;
 }
+
 .calendar__header {
   display: flex;
   margin-bottom: 2rem;
   align-items: center;
   margin: 0px 10px 0px 10px;
 }
+
 .input {
   flex: 1;
   position: relative;
 }
+
 .calendar__header_month {
   margin: 0.5rem;
   color: #707070;
@@ -25,17 +42,37 @@
   gap: 23px;
   flex-direction: row;
 }
+
 .calendar__header_month div {
   font-weight: 400;
   color: black;
   font-family: Outfit;
 }
+
+.searchbutton {
+  background-color: var(--search-button-bg);
+  border-color: var(--search-button-border);
+  position: absolute;
+  z-index: 10;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.searchbutton:hover {
+  background-color: var(--search-button-bg);
+  border-color: var(--search-button-border);
+}
+
 .space {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-around;
 }
+
 .button {
   border-radius: 100px;
   color: #707070;
@@ -52,43 +89,50 @@
   font-family: Outfit;
   height: 60px;
 }
+
 .calendar__scroll {
   height: 80vh;
   padding: 10px;
 }
+
 .weekday {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: white;
   font-weight: 600;
 }
+
 .calendar__days {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   grid-template-rows: repeat(6, 1fr);
 }
+
 .calendar_hour_text_container {
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   border-right: 1px solid #8d8d8d55;
   width: 40px;
 }
+
 .calendar_hour_text {
   top: -10px;
   left: -5px;
   position: relative;
   color: #707070;
   font-size: 12px;
 }
+
 .calendar_timezone_text {
   top: -10px;
   left: -11px;
   position: relative;
   color: #707070;
   font-size: 9px;
 }
+
 .calendar_hour_block {
   display: flex;
   flex-direction: row;
@@ -97,18 +141,22 @@
   height: 50px;
   border-bottom-right-radius: 5px;
 }
+
 .event_list_parent {
   position: relative;
   width: 100%;
 }
+
 .event_list_parent_current {
   background-color: #def6e1;
   position: relative;
   width: 100%;
 }
+
 .dummyWidth {
   width: 1px;
 }
+
 .day {
   background-color: #ffffff;
   padding-left: 0.3rem;
@@ -122,26 +170,32 @@
   height: 9rem;
   position: relative;
 }
+
 .day_weekends {
   background-color: rgba(49, 187, 107, 0.2);
 }
+
 .day__outside {
   background-color: white;
   color: #89898996;
 }
+
 .day__selected {
   background-color: #007bff;
   color: #707070;
 }
+
 .day__today {
   background-color: #def6e1;
   font-weight: 700;
   text-decoration: underline;
   color: #31bb6b;
 }
+
 .day__events {
   background-color: white;
 }
+
 .btn__today {
   transition: ease-in all 200ms;
   font-family: Arial;
@@ -152,6 +206,7 @@
   margin-left: 20px;
   border: none;
 }
+
 .btnsContainer {
   display: flex;
   margin: 2.5rem 0 2.5rem 0;
@@ -169,10 +224,17 @@
 }
 
 .dropdown {
-  border-color: #31bb6b;
+  border: 1px solid var(--dropdown-border-color);
   background-color: white;
-  color: #31bb6b;
-  box-shadow: 0px 2px 1px rgba(49, 187, 107, 0.5); /* Added blur effect */
+  color: var(--dropdown-text-color);
+  box-shadow: 0px 2px 1px var(--grey-bg-color);
+  /* Added blur effect */
+}
+
+.dropdown:is(:hover, :focus, :active, :focus-visible, .show) {
+  background-color: transparent !important;
+  border: 1px solid var(--dropdown-border-color);
+  color: var(--dropdown-text-color) !important;
 }
 
 .btnsContainer .input {
@@ -187,6 +249,7 @@
 .btnsContainer .input button {
   width: 52px;
 }
+
 .searchBtn {
   margin-bottom: 10px;
 }
@@ -195,12 +258,14 @@
   margin-top: 10px;
   margin-bottom: 10px;
   background-color: white;
-  box-shadow: 0 1px 1px #31bb6b;
+  box-shadow: 0 1px 1px var(--search-button-bg);
 }
+
 .inputField > button {
   padding-top: 10px;
   padding-bottom: 10px;
 }
+
 .btn__more {
   border: 0px;
   font-size: 14px;
@@ -212,23 +277,40 @@
   display: block;
   margin: 2px;
 }
+
 .btn__more:hover {
   color: #454645;
 }
 
 .expand_event_list {
   display: block;
 }
+
 .list_container {
   padding: 5px;
   width: fit-content;
   display: flex;
   flex-direction: row;
 }
+
 .event_list_hour {
   display: flex;
   flex-direction: row;
 }
+
+.createButton {
+  background-color: var(--grey-bg-color) !important;
+  color: black !important;
+
+  border: 1px solid var(--dropdown-border-color);
+}
+
+.createButton:hover {
+  background-color: var(--grey-bg-color) !important;
+  color: black !important;
+  border: 1px solid var(--dropdown-border-color) !important;
+}
+
 .expand_list_container {
   width: 200px;
   max-height: 250px;
@@ -243,6 +325,7 @@
   border-radius: 5px;
   margin: 5px;
 }
+
 .flex_grow {
   flex-grow: 1;
 }
@@ -251,10 +334,12 @@
   .event_list {
     display: none;
   }
+
   .expand_list_container {
     width: 150px;
     padding: 4px 4px 0px 4px;
   }
+
   .day {
     height: 5rem;
   }
@@ -273,6 +358,7 @@
   gap: 10px;
   margin-top: 35px;
 }
+
 .card__holidays {
   background-color: rgba(246, 242, 229, 1);
   display: flex;
@@ -285,24 +371,29 @@
   overflow: hidden;
   white-space: nowrap;
 }
+
 .month__holidays {
   display: flex;
   flex-direction: column;
 }
+
 .holiday__data {
   display: flex;
   flex-direction: row;
   gap: 10px;
 }
+
 .holiday__date {
   font-size: 20px;
   color: rgba(234, 183, 86, 1);
   font-weight: 700;
 }
+
 .holiday__name {
   font-size: 20px;
   margin-left: 35px;
 }
+
 .card__events {
   background-color: rgba(244, 244, 244, 1);
   display: flex;
@@ -312,21 +403,25 @@
   border-radius: 20px;
   padding: 30px;
 }
+
 .innercard__events {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 1rem;
 }
+
 .innercard__events p {
   margin-bottom: 0;
 }
+
 .orgEvent__color {
   height: 15px;
   width: 40px;
   background-color: rgba(82, 172, 255, 0.5);
   border-radius: 10px;
 }
+
 .holidays__color {
   height: 15px;
   width: 40px;