myselect style

Author: citizen-dror

src/components/common/MySelect/MySelect.tsx

@@ -30,9 +30,9 @@ const MySelect = <T,>({
   const controlId = id || (label ? `${label}-id` : undefined);
 
   return (
-    <Form.Group controlId={controlId} style={style} className={`mb-2 ${cssClass}`}>
+    <Form.Group controlId={controlId} style={style} className={`mb-2 select-wrapper ${cssClass}`}>
       {label && (
-        <Form.Label style={{ whiteSpace: "nowrap" }}>
+        <Form.Label style={cssClass && cssClass.includes('stacked') ? {} : { whiteSpace: "nowrap" }}>
           {t(label)}
         </Form.Label>
       )}

src/components/common/MySelect/my-select.css

@@ -17,15 +17,33 @@
    border: 2px rgb(108, 108, 246) solid;
 }
 
+.select-wrapper {
+   display: inline-flex;
+   align-items: center;
+   gap: 0.5rem;
+}
+
 .select-wrapper label {
    font-weight: 700;
 }
 
+/* stacked variant: label above the select */
+.select-wrapper.stacked {
+   display: flex;
+   flex-direction: column;
+   align-items: flex-start;
+   gap: 0.25rem;
+}
+
 .my-select {
   height: 28px;
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;       
   padding-top: .15rem;
   padding-bottom: .15rem;
   font-size: 0.95rem;
+}
+
+/* utility class that adds horizontal spacing when needed */
+.my-select-spaced {
+   margin-left: 0.5rem;
+   margin-right: 0.5rem;
 }

src/components/filter/CardFilterWhen.tsx

@@ -35,13 +35,15 @@ const CardFilterWhen: React.FC<any> = observer(() => {
                          label={'FromYear'}
                          value={String(startYear.queryValue)}
                          data={startYear.arrTypes}
-                         onChange={(e: ChangeEvent<HTMLSelectElement>) => { setStartYear(e.target.value); }}                   
+                         onChange={(e: ChangeEvent<HTMLSelectElement>) => { setStartYear(e.target.value); }}
+                         cssClass="my-select-spaced"
                       />
                       <MySelect
                          label={'ToYear'}
                          value={String(endYear.queryValue)}
                          data={endYear.arrTypes}
                          onChange={(e: ChangeEvent<HTMLSelectElement>) => { setEndYear(e.target.value); }}
+                         cssClass="my-select-spaced"
 
                       />
                    </div>

src/components/filter/CardFilterWhere.tsx

@@ -46,10 +46,11 @@ const CardFilterWhere = observer(() => {
                 <CitySelector isMultiple={isMultipleCities} /> 
                 <StreetSelector />
                 {showPoliceStation&& <MySelect
-                     label={'PoliceStation'}
-                     value={String(zoneName.queryValue)}
-                     data={zoneName.arrTypes}
-                     onChange={(e: ChangeEvent<HTMLSelectElement>) => { setZonesName(e.target.value); }}                   
+                   label={'PoliceStation'}
+                   value={String(zoneName.queryValue)}
+                   data={zoneName.arrTypes}
+                   onChange={(e: ChangeEvent<HTMLSelectElement>) => { setZonesName(e.target.value); }}   
+                   cssClass="stacked"                
                 />}
                 <RoadNameSelector />
                 <RoadSegmentSelector />

src/components/filter/StreetSelector.tsx

@@ -21,7 +21,7 @@ const StreetSelector: React.FC<IProps> = observer(() => {
     return (
       <Form.Group controlId="filterForm.ControlStreet">
         <Form.Label className="filterLable">
-          {t('Street')}
+          {t('Street')}:
         </Form.Label>
         <Typeahead
           id="street-selector"

src/components/groupby/SelectGroupBy.tsx

@@ -31,7 +31,8 @@ const SelectGroupBy: React.FC<IProps> = observer(({ id, labelText = 'GroupBy' })
       valProp="value" 
       contentProp="text" 
       value={val} 
-      style={{ display: 'flex', height: '30px' }} 
+      style={{ display: 'flex', height: '30px'}} 
+      cssClass="my-select-spaced"
     />
   );
 });

src/components/groupby/SelectGroupBy2.tsx

@@ -28,6 +28,7 @@ const SelectGroupBy2: React.FC<IProps> = observer(({ id }) => {
       valProp="value"
       contentProp="text"
       value={val}
+      cssClass="my-select-spaced"
     />
   );
 });

src/components/molecules/LanguageSelector.tsx

@@ -22,6 +22,7 @@ const LanguageSelector = () => {
          valProp="value"
          contentProp="text"
          value={language}
+         cssClass="my-select-spaced"
       />
    );
 };