diff --git a/src/components/DynamicDropDown/DynamicDropDown.module.css b/src/components/DynamicDropDown/DynamicDropDown.module.css deleted file mode 100644 index 3cd40fe35d9c..000000000000 --- a/src/components/DynamicDropDown/DynamicDropDown.module.css +++ /dev/null @@ -1,13 +0,0 @@ -.dropwdownToggle { - background-color: #f1f3f6; - color: black; - width: 100%; - border: none; - padding: 0.5rem; - text-align: left; - display: flex; - align-items: center; - justify-content: space-between; - min-width: 8rem; - outline: 1px solid var(--bs-gray-400); -} diff --git a/src/components/DynamicDropDown/DynamicDropDown.tsx b/src/components/DynamicDropDown/DynamicDropDown.tsx index 05cd064ac285..1df5fbc3883d 100644 --- a/src/components/DynamicDropDown/DynamicDropDown.tsx +++ b/src/components/DynamicDropDown/DynamicDropDown.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Dropdown } from 'react-bootstrap'; -import styles from './DynamicDropDown.module.css'; +import styles from '../../style/app.module.css'; /** * Props for the DynamicDropDown component. diff --git a/src/style/app.module.css b/src/style/app.module.css index 5efd03ee9654..b160ce12bf19 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -383,9 +383,11 @@ .cards > h2 { font-size: 19px; } + .cards > h3 { font-size: 17px; } + .cards > p { font-size: 14px; margin-top: -5px; @@ -395,6 +397,7 @@ .cards:hover { filter: brightness(0.8); } + .cards:hover::before { opacity: 0.5; } @@ -457,6 +460,7 @@ margin: 0; height: 100%; } + .sidebar:after { background-color: var(--grey-border-box-color); position: absolute; @@ -466,10 +470,12 @@ left: 94%; display: block; } + .sidebarsticky { padding-left: 45px; margin-top: 7px; } + .sidebarsticky > p { margin-top: -10px; } @@ -564,6 +570,25 @@ background-color: var(--close-button-bg); } +/* Dynamic Dropdown */ +.dropwdownToggle { + background-color: #f1f3f6; + color: black; + width: 100%; + border: none; + padding: 0.5rem; + text-align: left; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 8rem; + outline: 1px solid var(--bs-gray-400); + cursor: pointer; + transition: background-color 0.2s ease; + position: relative; + z-index: 1; +} + .dropdown { background-color: var(--sortBtn-bg) !important; min-width: 150px; @@ -1070,6 +1095,7 @@ transform: scale(1.5); color: var(--bs-danger, var(--delete-button-color)); margin-bottom: 1rem; + /* Add error icon for non-color indication */ &::before { content: '⚠️'; @@ -1265,6 +1291,7 @@ hr { position: relative; display: inline-block; } + .pageNotFound h1.head span:before, .pageNotFound h1.head span:after { position: absolute; @@ -1274,6 +1301,7 @@ hr { background: var(--white); content: ''; } + .pageNotFound h1.head span:before { left: -55%; } @@ -1555,17 +1583,21 @@ hr { .card { width: fit-content; } + .cardContainer { width: 300px; } .ratingFilled { - color: var(--rating-star-filled); /* Color for filled stars */ + color: var(--rating-star-filled); + /* Color for filled stars */ } .ratingHover { - color: var(--rating-star-hover); /* Color for star on hover */ + color: var(--rating-star-hover); + /* Color for star on hover */ } + .cardHeader { padding: 1.25rem 1rem 1rem 1rem; border-bottom: 1px solid var(--bs-gray-200); @@ -1614,6 +1646,7 @@ hr { margin-bottom: 0; margin-top: 20px; } + .ctacards { padding: 20px; width: 100%; @@ -1625,6 +1658,7 @@ hr { border: 1px solid var(--create-button-border); border-radius: 8px; } + .ctacards span { color: var(--dimp-white); font-size: small; @@ -1814,9 +1848,11 @@ hr { .membername { color: var(--blue-color); } + .actionBtn { background-color: var(--primary-bg-color) !important; } + .actionBtn:hover, .actionBtn:focus, .actionBtn:active { @@ -1907,6 +1943,7 @@ hr { font-size: medium; cursor: pointer; } + .campaignNameInfo:hover { color: var(--blue-color); transform: translateY(-2px); @@ -2036,20 +2073,25 @@ hr { .pageNotFound .brand h3 { font-size: 20px; } + .pageNotFound h1.head { font-size: 130px; letter-spacing: 0; } + .pageNotFound h1.head span:before, .pageNotFound h1.head span:after { width: 40%; } + .pageNotFound h1.head span:before { left: -45%; } + .pageNotFound h1.head span:after { right: -45%; } + .pageNotFound p { font-size: 18px; } @@ -2059,21 +2101,26 @@ hr { .pageNotFound .brand h3 { font-size: 16px; } + .pageNotFound h1.head { font-size: 100px; letter-spacing: 0; } + .pageNotFound h1.head span:before, .pageNotFound h1.head span:after { width: 25%; } + .pageNotFound h1.head span:before { left: -30%; } + .pageNotFound h1.head span:after { right: -30%; } } + @media (max-width: 520px) { .btnsContainer { margin-bottom: 0; @@ -2158,6 +2205,7 @@ hr { -webkit-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); @@ -2169,11 +2217,13 @@ hr { -webkit-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } + .btnsContainer .input { flex: 1; position: relative; @@ -2248,7 +2298,8 @@ hr { .rowBackgrounds { background-color: var(--bs-white); max-height: 120px; - overflow-y: auto; /* Handle content overflow */ + overflow-y: auto; + /* Handle content overflow */ } .noBorderRow td { @@ -2259,6 +2310,7 @@ hr { color: var(--blue-color); font-weight: 500; cursor: pointer; + /* Prevent layout shift */ &::after { display: block; @@ -2273,6 +2325,7 @@ hr { .tagsBreadCrumbs { color: var(--bs-gray); cursor: pointer; + /* Prevent layout shift */ &::after { display: block; @@ -2419,8 +2472,10 @@ input[type='radio']:checked + label:hover { color: var(--eventManagement-button-bg); box-shadow: 0 1px 1px var(--brand-primary); width: 375px; - padding-right: 40px; /* Make room for the button */ - border-radius: 8px; /* Match the image's rounded corners */ + padding-right: 40px; + /* Make room for the button */ + border-radius: 8px; + /* Match the image's rounded corners */ } .inputFields:focus { @@ -2602,6 +2657,7 @@ input[type='radio']:checked + label:hover { transition: background-color 0.5s ease; background-color: var(--opendrawer-hover); } + .collapseSidebarButton:hover { transition: background-color 0.5s ease; background-color: var(--collapseSidebarButton-hover); @@ -2618,6 +2674,7 @@ input[type='radio']:checked + label:hover { width: 250px; height: 20px; } + .opendrawer { width: 30px; } @@ -2764,6 +2821,7 @@ input[type='radio']:checked + label:hover { margin-left: auto; display: block; } + .joinBtn, .joinedBtn, .withdrawBtn { @@ -2898,6 +2956,7 @@ input[type='radio']:checked + label:hover { border: 0; color: var(--startPostBtn-hover-color) !important; } + .icons { width: 25px; } @@ -3138,6 +3197,7 @@ input[type='radio']:checked + label:hover { color: var(--pluginStore-color); border: 0.5px solid var(--pluginStoreBtn-border); } + .searchButtonOrgList { background-color: var(--light-blue); position: absolute; @@ -3239,6 +3299,7 @@ input[type='radio']:checked + label:hover { margin-top: 0.7rem; color: var(--dropdown-button-fill); } + .createorgdropdown:active, .createorgdropdown:hover { background-color: var(--createorgdropdown-button-bg) !important; @@ -3246,6 +3307,7 @@ input[type='radio']:checked + label:hover { color: var(--dropdown-button-fill) !important; box-shadow: var(--hover-shadow); } + .notFound { flex: 1; display: flex; @@ -3731,6 +3793,7 @@ input[type='radio']:checked + label:hover { .maxWidth40 { max-width: 40%; } + .maxWidth50 { max-width: 50%; } @@ -3757,7 +3820,8 @@ input[type='radio']:checked + label:hover { } .dateboxMemberDetail > div > input { - padding: 0.5rem 0 0.5rem 0.5rem !important; /* top, right, bottom, left */ + padding: 0.5rem 0 0.5rem 0.5rem !important; + /* top, right, bottom, left */ background-color: var(--input-area-color); border-radius: var(--bs-border-radius) !important; border: none !important; @@ -3856,6 +3920,7 @@ input::file-selector-button { width: 100%; } } + @media (max-width: 600px) { .cardBody { min-height: 120px; @@ -4094,7 +4159,8 @@ form > input { padding: 0; color: var(--langChange-button-text); border-color: var(--langChange-button-bg); - background-color: transparent; /* Default transparent background */ + background-color: transparent; + /* Default transparent background */ } .langChangeBtnStyle:hover { @@ -4108,6 +4174,7 @@ form > input { aspect-ratio: 1; display: block; margin: 1.5rem auto 1rem; + @media (prefers-reduced-motion: no-preference) { -webkit-animation: zoomIn 0.3s ease-in-out; animation: zoomIn 0.3s ease-in-out; @@ -4143,6 +4210,7 @@ form > input { align-items: center; color: var(--search-button-fill); } + .email_button:hover { color: var(--search-button-fill) !important; box-shadow: var(--hover-shadow); @@ -4188,6 +4256,7 @@ form > input { transition: background-color 0.2s ease; cursor: pointer; } + .reg_btn:hover { color: var(--login-button-fill) !important; box-shadow: var(--hover-shadow); @@ -4268,6 +4337,7 @@ form > input { width: 28px; height: 26px; } + /* CSS Refactor for OrgPost */ .btnsContainerOrgPost { @@ -4306,14 +4376,17 @@ form > input { margin-top: 10px; justify-content: center; } + .previewOrgPost img { width: 400px; height: auto; } + .previewOrgPost video { width: 400px; height: auto; } + .mainpagerightOrgPost > hr { margin-top: 20px; width: 100%; @@ -4390,6 +4463,7 @@ form > input { .row .left_portion { padding: 0 2rem; } + .row .left_portion .inner .palisadoes_logo { width: 100%; } @@ -4399,18 +4473,22 @@ form > input { .row { flex-direction: column-reverse; } + .row .right_portion, .row .left_portion { height: unset; } + .row .right_portion { min-height: 100vh; overflow-y: unset; } + .row .left_portion .inner { display: flex; justify-content: center; } + .row .left_portion .inner .palisadoes_logo { height: 70px; width: unset; @@ -4420,10 +4498,12 @@ form > input { right: 0; z-index: 100; } + .row .left_portion .inner p { margin-bottom: 0; padding: 1rem; } + .socialIcons { margin-bottom: 1rem; } @@ -4433,19 +4513,23 @@ form > input { .row .right_portion { padding: 1rem 1rem 0 1rem; } + .row .right_portion .langChangeBtn { position: absolute; margin: 1rem; left: 0; top: 0; } + .marginTopForReg { margin-top: 4rem !important; } + .row .right_portion .talawa_logo { height: 120px; margin: 0 auto 2rem auto; } + .socialIcons { margin-bottom: 1rem; } @@ -4467,6 +4551,7 @@ form > input { -webkit-transform: scale(0.5); transform: scale(0.5); } + 100% { opacity: 1; -webkit-transform: scale(1); @@ -4480,6 +4565,7 @@ form > input { -webkit-transform: scale(0.5); transform: scale(0.5); } + 100% { opacity: 1; -webkit-transform: scale(1); @@ -4493,6 +4579,7 @@ form > input { -webkit-transform: translateY(2rem); transform: translateY(2rem); } + 100% { opacity: 1; -webkit-transform: translateY(0); @@ -4506,6 +4593,7 @@ form > input { -webkit-transform: translateY(2rem); transform: translateY(2rem); } + 100% { opacity: 1; -webkit-transform: translateY(0); @@ -4540,11 +4628,13 @@ form > input { width: 100%; } } + @media screen and (max-width: 575.5px) { .mainpagerightOrgPost { width: 98%; } } + .addbtnOrgPost { border: 1px solid var(--grey-border-box-color); box-shadow: 0 2px 2px var(--grey-border-box-color); @@ -4560,10 +4650,12 @@ form > input { transform 0.2s, box-shadow 0.2s; } + .postinfo { height: 80px; margin-bottom: 20px; } + .closeButtonOrgPost { position: absolute; top: 0px; @@ -4576,15 +4668,18 @@ form > input { font-weight: 600; font-size: 16px; } + button[data-testid='createPostBtn'] { display: block; } + .loader, .loader:after { border-radius: 50%; width: var(--loader-size); height: var(--loader-size); } + .loader { margin: 60px auto; margin-top: 35vh !important; @@ -4601,21 +4696,25 @@ button[data-testid='createPostBtn'] { -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; } + @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } + @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); @@ -4627,12 +4726,14 @@ button[data-testid='createPostBtn'] { overflow-y: auto; width: auto; } + @media only screen and (max-width: 600px) { .form_wrapper { width: 90%; top: 45%; } } + .cardItem { position: relative; display: flex; @@ -4641,12 +4742,14 @@ button[data-testid='createPostBtn'] { border-radius: 8px; margin-top: 20px; } + @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } + 100% { opacity: 1; -webkit-transform: scale(1); @@ -4660,6 +4763,7 @@ button[data-testid='createPostBtn'] { -webkit-transform: scale(0.5); transform: scale(0.5); } + 100% { opacity: 1; -webkit-transform: scale(1); @@ -4692,9 +4796,11 @@ button[data-testid='createPostBtn'] { flex: 1; overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; /* Fallback for browsers that don't support line-clamp */ + white-space: nowrap; + /* Fallback for browsers that don't support line-clamp */ margin-left: 3px; } + /* Modern browsers - enable line clamping */ @supports (-webkit-line-clamp: 1) { .cardItem .title, @@ -4706,6 +4812,7 @@ button[data-testid='createPostBtn'] { white-space: initial; } } + .cardItem .location { font-size: 0.9rem; color: var(--bs-primary); @@ -4725,6 +4832,7 @@ button[data-testid='createPostBtn'] { font-size: 1rem; color: var(--bs-success, var(--green-color)); } + .rightCard { display: flex; gap: 7px; @@ -4752,6 +4860,7 @@ button[data-testid='createPostBtn'] { .buttonList { background-color: var(--buttonList-bg) !important; } + /* AddOnEntry.tsx */ .entrytoggle { @@ -4923,6 +5032,7 @@ button[data-testid='createPostBtn'] { .leftDrawer .optionList button:hover { color: var(--leftDrawer-option-text) !important; } + .leftDrawer .optionList button:active, .leftDrawer .optionList button:focus { .leftDrawer .optionList button:active, @@ -4930,6 +5040,7 @@ button[data-testid='createPostBtn'] { font-weight: 500; } } + .leftDrawer .optionList button:hover svg { stroke: var(--leftDrawer-option-text) !important; } @@ -5061,6 +5172,7 @@ button[data-testid='createPostBtn'] { height: 100vh; padding: 2rem; } + .opendrawer { width: 25px; } @@ -5168,6 +5280,7 @@ button[data-testid='createPostBtn'] { opacity: 0; left: -1000px; } + to { left: 0; opacity: 1; @@ -5194,13 +5307,18 @@ button[data-testid='createPostBtn'] { /* LeftDrawer general styles */ .leftDrawer { - height: 100vh; /* Ensure it spans the full height */ + height: 100vh; + /* Ensure it spans the full height */ background-color: var(--profile-bg); - overflow-y: auto; /* Enable vertical scrolling */ + overflow-y: auto; + /* Enable vertical scrolling */ transition: transform 0.3s ease; - will-change: transform; /* NEW */ - position: fixed; /* Ensure it's positioned properly */ - padding-bottom: 1rem; /* Prevent last item clipping */ + will-change: transform; + /* NEW */ + position: fixed; + /* Ensure it's positioned properly */ + padding-bottom: 1rem; + /* Prevent last item clipping */ overscroll-behavior: contain; /* Improve scroll performance */ -webkit-overflow-scrolling: touch; @@ -5220,6 +5338,7 @@ button[data-testid='createPostBtn'] { .inactiveDrawer { transform: translateX(-100%); + &[data-hidden='true'] { /* Specific styles for inactive drawers if needed */ } @@ -5227,6 +5346,7 @@ button[data-testid='createPostBtn'] { .activeDrawer { transform: translateX(0); + &[data-hidden='false'] { /* Specific styles for active drawers if needed */ } @@ -5242,9 +5362,11 @@ button[data-testid='createPostBtn'] { align-items: center; justify-content: space-between; width: 100%; + /* Add focus styles for keyboard navigation */ &:focus-within { - @extend .reusable-focus-visible; /* Referencing the reusable class from the general section */ + @extend .reusable-focus-visible; + /* Referencing the reusable class from the general section */ } } @@ -5264,6 +5386,7 @@ button[data-testid='createPostBtn'] { width: 40px; height: 40px; border-radius: 50%; + /* Add alt text styles */ &[alt] { font-size: 0.875rem; @@ -5278,21 +5401,25 @@ button[data-testid='createPostBtn'] { .primaryText { font-weight: bold; color: var(--bs-emphasis-color, var(--black-color)); - @extend .reusable-text-ellipsis; /* Referencing the reusable class from the general section */ + @extend .reusable-text-ellipsis; + /* Referencing the reusable class from the general section */ } .secondaryText { font-size: 0.9rem; color: var(--bs-secondary-text); - @extend .reusable-text-ellipsis; /* Referencing the reusable class from the general section */ + @extend .reusable-text-ellipsis; + /* Referencing the reusable class from the general section */ } /* Dropdown and options list */ .titleHeader { font-size: 1.2rem; color: var(--bs-secondary); - line-height: 1.5; /* NEW */ - margin: var(--spacing-md, 1rem) 0; /* NEW */ + line-height: 1.5; + /* NEW */ + margin: var(--spacing-md, 1rem) 0; + /* NEW */ } /* Active and inactive buttons */ @@ -5306,7 +5433,8 @@ button[data-testid='createPostBtn'] { } &.focus-visible { - @extend .reusable-focus-visible; /* Referencing the reusable class from the general section */ + @extend .reusable-focus-visible; + /* Referencing the reusable class from the general section */ } } @@ -5315,11 +5443,13 @@ button[data-testid='createPostBtn'] { color: black; &::before { - @extend .reusable-indicator; /* Referencing the reusable class from the general section */ + @extend .reusable-indicator; + /* Referencing the reusable class from the general section */ } &::after { - @extend .reusable-arrow-indicator; /* Referencing the reusable class from the general section */ + @extend .reusable-arrow-indicator; + /* Referencing the reusable class from the general section */ } } @@ -5455,36 +5585,43 @@ button[data-testid='createPostBtn'] { .attendance-modal .borderRightGreen { border-right: 1px solid var(--light-dark-green); } + .attendance-modal .positionedTopRight { top: 10px; right: 15px; z-index: 1; } + .attendance-modal .topRightCorner { position: absolute; right: 0; top: 0; border-bottom-left-radius: 8px; } + .attendance-modal .bottomRightCorner { position: absolute; right: 0; bottom: 0; border-top-left-radius: 12px; } + .attendance-modal .topLeftCorner { position: absolute; left: 0; top: 0; border-bottom-right-radius: 8px; } + .attendance-modal .largeBoldText { font-size: 80px; font-weight: 400; } + .attendance-modal .paddingBottom30 { padding-bottom: 30px; } + .attendance-modal .paddingBottom2Rem { padding-bottom: 2rem; } @@ -5521,10 +5658,12 @@ button[data-testid='createPostBtn'] { gap: 0.5rem; align-items: center; } + .creator p { margin-bottom: 0; font-weight: 500; } + .creator svg { width: 1.5rem; height: 1.5rem; @@ -5538,6 +5677,7 @@ button[data-testid='createPostBtn'] { --bs-btn-active-bg: transparent; --bs-btn-focus-box-shadow: none; } + .customToggle svg { color: var(--bs-black); } @@ -5545,12 +5685,14 @@ button[data-testid='createPostBtn'] { .customToggle::after { content: none; } + .customToggle:hover, .customToggle:focus, .customToggle:active { background: none; border: none; } + .cardBodyPostCard div { padding: 0.5rem; } @@ -5585,14 +5727,17 @@ button[data-testid='createPostBtn'] { margin-top: 0.7rem !important; text-align: left; } + .viewBtn { display: flex; justify-content: flex-end; margin: 0.5rem; } + .viewBtn Button { padding-inline: 1rem; } + .cardActions { display: flex; flex-direction: row; @@ -5734,6 +5879,7 @@ button[data-testid='createPostBtn'] { .selectType { border-radius: 10px; } + .dropdown__item { text-overflow: ellipsis; overflow: hidden; @@ -5755,6 +5901,7 @@ button[data-testid='createPostBtn'] { gap: 15px; flex-wrap: wrap; } + .datePicker { border-radius: 10px; height: 2.5rem; @@ -5782,6 +5929,7 @@ button[data-testid='createPostBtn'] { flex-wrap: wrap; margin-top: 20px; } + .titlemodalEvents { color: var(--grey-bg-color-dark); font-weight: 600; @@ -5815,6 +5963,7 @@ button[data-testid='createPostBtn'] { .checkboxdivEvents > label { margin-right: 50px; } + .checkboxdivEvents > label > input { margin-left: 10px; } @@ -5822,6 +5971,7 @@ button[data-testid='createPostBtn'] { .checkboxdivEvents { display: flex; } + .checkboxdivEvents > div { width: 50%; } @@ -5830,6 +5980,7 @@ button[data-testid='createPostBtn'] { display: flex; align-items: center; } + .dispflexEvents > input { border: none; box-shadow: none; @@ -5851,6 +6002,7 @@ button[data-testid='createPostBtn'] { cursor: pointer; transition: all 0.2s ease-in-out; width: 100%; + &:hover { transform: translateY(-1px); box-shadow: 0 4px 6px var(--grey-border-box-color); @@ -5886,6 +6038,7 @@ button[data-testid='createPostBtn'] { justify-content: center; align-items: center; } + .tableContainer { height: 400px; overflow-y: scroll; @@ -6194,7 +6347,8 @@ button[data-testid='createPostBtn'] { display: flex; position: relative; width: 100%; - overflow: hidden; /* Ensures content doesn't overflow the card */ + overflow: hidden; + /* Ensures content doesn't overflow the card */ justify-content: center; border: 1px solid #ccc; } @@ -6202,15 +6356,18 @@ button[data-testid='createPostBtn'] { .previewVenueModal img { width: 400px; height: auto; - object-fit: cover; /* Ensures the image stays within the boundaries */ + object-fit: cover; + /* Ensures the image stays within the boundaries */ } .closeButtonP { position: absolute; top: 0px; right: 0px; - width: 32px; /* Make the button circular */ - height: 32px; /* Make the button circular */ + width: 32px; + /* Make the button circular */ + height: 32px; + /* Make the button circular */ background: transparent; transform: scale(1.2); cursor: pointer; @@ -6225,8 +6382,10 @@ button[data-testid='createPostBtn'] { } .closeButtonP:hover { - transform: scale(1.1); /* Slightly enlarge on hover */ - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Add a shadow on hover */ + transform: scale(1.1); + /* Slightly enlarge on hover */ + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); + /* Add a shadow on hover */ } /* YearlyEventCalender.tsx */ @@ -6598,6 +6757,7 @@ button[data-testid='createPostBtn'] { .cardGridItem { width: 100%; } + .justifyspAddOnStore { grid-template-columns: 1fr; justify-content: center; @@ -6659,7 +6819,8 @@ button[data-testid='createPostBtn'] { position: relative; width: 100%; margin-top: 10px; - overflow: hidden; /* Ensures content doesn't overflow the card */ + overflow: hidden; + /* Ensures content doesn't overflow the card */ justify-content: center; border: 1px solid #ccc; } @@ -6667,7 +6828,8 @@ button[data-testid='createPostBtn'] { .previewAdvertisementRegister img { width: 400px; height: auto; - object-fit: cover; /* Ensures the image stays within the boundaries */ + object-fit: cover; + /* Ensures the image stays within the boundaries */ } .previewAdvertisementRegister video { @@ -6679,8 +6841,10 @@ button[data-testid='createPostBtn'] { position: absolute; top: 0px; right: 0px; - width: 32px; /* Make the button circular */ - height: 32px; /* Make the button circular */ + width: 32px; + /* Make the button circular */ + height: 32px; + /* Make the button circular */ background: transparent; transform: scale(1.2); cursor: pointer; @@ -6695,8 +6859,10 @@ button[data-testid='createPostBtn'] { } .closeButtonAdvertisementRegister:hover { - transform: scale(1.1); /* Slightly enlarge on hover */ - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Add a shadow on hover */ + transform: scale(1.1); + /* Slightly enlarge on hover */ + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); + /* Add a shadow on hover */ } .buttonAdvertisementRegister { @@ -7681,22 +7847,26 @@ button[data-testid='createPostBtn'] { .hideElemByDefault { display: none; } + .leftDrawer { width: 100%; left: 0; right: 0; } + .inactiveDrawer { opacity: 0; left: 0; z-index: -1; animation: closeDrawer 0.4s ease-in-out; } + .activeDrawer { display: flex; z-index: 100; animation: openDrawer 0.6s ease-in-out; } + .logout { margin-bottom: 2.5rem !important; } @@ -7714,9 +7884,11 @@ button[data-testid='createPostBtn'] { background-color: var(--tablerow-bg-color) !important; justify-content: space-between; width: 100%; + /* Add focus styles for keyboard navigation */ &:focus-within { - @extend .reusable-focus-visible; /* Referencing the reusable class from the general section */ + @extend .reusable-focus-visible; + /* Referencing the reusable class from the general section */ } } @@ -7728,34 +7900,40 @@ button[data-testid='createPostBtn'] { outline: none; background-color: var(--profileContainer-focus-bg); } + .imageContainer { width: 56px; height: 56px; border-radius: 100%; margin-right: 10px; } + .imageContainer img { width: 100%; height: 100%; object-fit: cover; border-radius: 100%; } + .profileContainer .profileText { flex: 1; text-align: start; overflow: hidden; margin-right: 4px; } + .profileContainer .profileText .primaryText { font-size: 1rem; font-weight: 600; overflow: hidden; display: -webkit-box; - -webkit-line-clamp: 2; /* number of lines to show */ + -webkit-line-clamp: 2; + /* number of lines to show */ -webkit-box-orient: vertical; word-wrap: break-word; white-space: normal; } + .profileContainer .profileText .secondaryText { font-size: 0.8rem; font-weight: 400; @@ -7763,13 +7941,16 @@ button[data-testid='createPostBtn'] { display: block; text-transform: capitalize; } + .profileDropdown { background-color: transparent !important; } + .profileDropdown .dropdown-toggle .btn .btn-normal { display: none !important; background-color: transparent !important; } + .dropdownToggle { background-image: url(../../../public/images/svg/angleDown.svg); background-repeat: no-repeat; @@ -7791,6 +7972,7 @@ button[data-testid='createPostBtn'] { border-top: none !important; border-bottom: none !important; } + .avatarStyle { border-radius: 100%; } @@ -7837,6 +8019,7 @@ button[data-testid='createPostBtn'] { box-shadow: var(--hover-shadow); color: black !important; } + .opendrawer { --bs-btn-active-color: var(--profile-bg); --bs-btn-active-bg: var(--profile-bg); @@ -7861,6 +8044,7 @@ button[data-testid='createPostBtn'] { .contract { padding-left: calc(250px + 2rem + 1.5rem); } + .collapseSidebarButton { width: calc(250px + 2rem); } @@ -7870,6 +8054,7 @@ button[data-testid='createPostBtn'] { .pageContainer { padding: 1rem 1.5rem 0 calc(300px + 2rem); } + .collapseSidebarButton { height: 30px; width: calc(300px + 1rem); @@ -7880,10 +8065,12 @@ button[data-testid='createPostBtn'] { .pageContainer { padding: 1rem 1.5rem 0 calc(270px); } + .collapseSidebarButton { width: 250px; height: 20px; } + .opendrawer { width: 30px; } @@ -8015,6 +8202,7 @@ button[data-testid='createPostBtn'] { margin-left: auto; display: block; } + .joinBtn, .joinedBtn, .withdrawBtn { @@ -8053,6 +8241,7 @@ button[data-testid='createPostBtn'] { margin-bottom: 0.8rem; background-color: var(--orgCard-Image-bg); } + .orgCard .innerContainer .content { flex: 1; margin-left: 1rem; @@ -8203,6 +8392,7 @@ button[data-testid='createPostBtn'] { color: var(--organization-color) !important; --bs-btn-active-bg: var(--organization-bg); } + .colorPrimary:hover, .colorPrimary:focus, .colorPrimary:active { @@ -8247,6 +8437,7 @@ button[data-testid='createPostBtn'] { width: 250px; height: 20px; } + .opendrawer { width: 30px; } @@ -8258,6 +8449,7 @@ button[data-testid='createPostBtn'] { height: 100vh; padding: 2rem; } + .opendrawer { width: 25px; } @@ -8312,6 +8504,7 @@ button[data-testid='createPostBtn'] { border: 1px solid var(--LoginToggle-button-active); background-color: var(--LoginToggle-button-active); } + /* people card */ .personImage_peoplecard { border-radius: 50%; @@ -8567,7 +8760,8 @@ button[data-testid='createPostBtn'] { font-weight: 600; overflow: hidden; display: -webkit-box; - -webkit-line-clamp: 2; /* number of lines to show */ + -webkit-line-clamp: 2; + /* number of lines to show */ -webkit-box-orient: vertical; word-wrap: break-word; white-space: normal; @@ -8635,62 +8829,77 @@ button[data-testid='createPostBtn'] { .leftDrawer { width: calc(300px + 1rem); } + .leftDrawer .talawaLogo { width: 38px; height: 38px; margin-right: 0.4rem; } + .leftDrawer .talawaText { font-size: 1rem; } + .leftDrawer .organizationContainer button { margin: 0.6rem 0; padding: 2.2rem 0.1rem; } + .leftDrawer .optionList button { margin-bottom: 0.05rem; font-size: 16px; padding-left: 0.8rem; } + .leftDrawer .profileContainer .profileTextUserSidebarOrg .primaryText { font-size: 1rem; } + .leftDrawer .profileContainer .profileTextUserSidebarOrg .secondaryText { font-size: 0.8rem; } } + @media (max-height: 650px) { .leftDrawer { padding: 0.5rem 0.8rem 0 0.8rem; width: calc(250px); } + .leftDrawer .talawaText { font-size: 0.8rem; } + .leftDrawer .organizationContainer button { margin: 0.2rem 0; padding: 1.6rem 0rem; } + .leftDrawer .titleHeader { font-size: 16px; } + .leftDrawer .optionList button { margin-bottom: 0.05rem; font-size: 14px; padding: 0.4rem; padding-left: 0.8rem; } + .leftDrawer .profileContainer .profileTextUserSidebarOrg .primaryText { font-size: 0.8rem; } + .leftDrawer .profileContainer .profileTextUserSidebarOrg .secondaryText { font-size: 0.6rem; } + .leftDrawer .imageContainer { width: 40px; margin-left: 5px; margin-right: 10px; } + .leftDrawer .imageContainer img { width: 40px; height: 100%; @@ -8834,10 +9043,12 @@ button[data-testid='createPostBtn'] { align-items: center; background-color: var(--tablerow-bg-color) !important; } + .profileContainer:focus { outline: none; background-color: var(--bs-gray-100); } + .imageContainer { width: 56px; height: 56px; @@ -8845,28 +9056,33 @@ button[data-testid='createPostBtn'] { margin-right: 10px; margin-top: 10px; } + .imageContainer img { width: 100%; height: 100%; object-fit: cover; border-radius: 100%; } + .profileContainer .profileTextUserSidebarOrg { flex: 1; text-align: start; overflow: hidden; margin-right: 4px; } + .profileContainer .profileTextUserSidebarOrg .primaryText { font-size: 1rem; font-weight: 600; overflow: hidden; display: -webkit-box; - -webkit-line-clamp: 2; /* number of lines to show */ + -webkit-line-clamp: 2; + /* number of lines to show */ -webkit-box-orient: vertical; word-wrap: break-word; white-space: normal; } + .profileContainer .profileTextUserSidebarOrg .secondaryText { font-size: 0.8rem; font-weight: 400;