diff --git a/src/style/app.module.css b/src/style/app.module.css index 793b403d94..bb06813c90 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -1,5 +1,6 @@ :root { --brown-color: #555555; + --brand-primary: #31bb6b; --dropdown-hover-color: #eff1f7; --grey-bg-color: #eaebef; --subtle-blue-grey: #7c9beb; @@ -140,7 +141,8 @@ } .noOutline:is(:hover, :focus, :active, :focus-visible, .show) { - outline: none !important; + outline: 2px solid var(--brand-primary); + outline-offset: 2px; } .closeButton { @@ -657,7 +659,7 @@ hr { .inputFieldPledge { background-color: white; - box-shadow: 0 1px 1px #31bb6b; + box-shadow: 0 1px 1px var(--brand-color); } .dropdownPledge { @@ -968,14 +970,14 @@ hr { } } -.list_box { +.listBox { height: auto; overflow-y: auto; width: 100%; } .inputFields { - box-shadow: 0 1px 1px #31bb6b; + box-shadow: 0 1px 1px var(--brand-color); } .fundName { @@ -1083,14 +1085,12 @@ input[type='radio']:checked + label { width: 50%; } -.greenregbtn { - margin-top: 1rem; - border: 1px solid var(--bs-gray-300); - box-shadow: 0 2px 2px var(--bs-gray-300); - padding: 10px 10px; +.baseBtn { + margin: 1rem 0 0; + border: 1px solid var(--border-color); + box-shadow: 0 2px 2px var(--shadow-color); + padding: 10px; border-radius: 5px; - background-color: var(--bs-primary); - width: 100%; font-size: 16px; color: var(--bs-white); outline: none; @@ -1099,27 +1099,18 @@ input[type='radio']:checked + label { transition: transform 0.2s, box-shadow 0.2s; +} + +.greenregbtn { + composes: baseBtn; + background-color: #31bb6b; width: 100%; } .manageBtn { - margin: 1rem 0 0; - margin-top: 15px; - border: 1px solid #e8e5e5; - box-shadow: 0 2px 2px #e8e5e5; - padding: 10px 10px; - border-radius: 5px; - font-size: 16px; - color: white; - outline: none; - font-weight: 600; - cursor: pointer; + composes: baseBtn; width: 45%; - transition: - transform 0.2s, - box-shadow 0.2s; } - .removeFilterIcon { cursor: pointer; } @@ -1156,7 +1147,10 @@ input[type='radio']:checked + label { } .noOutline input:disabled { - -webkit-text-fill-color: black !important; + -webkit-text-fill-color: var( + --disabled-text-color, + rgba(0, 0, 0, 0.75) + ) !important; } .noOutline textarea:disabled { @@ -1170,10 +1164,10 @@ input[type='radio']:checked + label { .dropdowns { background-color: white; - border: 1px solid #31bb6b; + border: 1px solid var(--brand-primary); position: relative; display: inline-block; - color: #31bb6b; + color: var(--brand-primary); } /* Action Items Data Grid */