Fixed short URL creation and modal close buttons

src/index.scss

@@ -153,6 +153,10 @@ hr {
   color: var(--text-color);
 }
 
+.btn-close {
+  filter: var(--btn-close-filter);
+}
+
 .table-hover tbody tr:hover {
   background-color: var(--secondary-color);
 }

src/servers/helpers/ServerForm.scss

@@ -1,5 +0,0 @@
-@import '../../utils/base';
-
-.server-form .form-group:last-child {
-  margin-bottom: 0;
-}

src/servers/helpers/ServerForm.tsx

@@ -3,7 +3,6 @@ import { InputFormGroup } from '../../utils/forms/InputFormGroup';
 import { handleEventPreventingDefault } from '../../utils/utils';
 import { ServerData } from '../data';
 import { SimpleCard } from '../../utils/SimpleCard';
-import './ServerForm.scss';
 
 interface ServerFormProps {
   onSubmit: (server: ServerData) => void;

src/short-urls/ShortUrlForm.scss

@@ -1,6 +1,5 @@
 @import '../utils/base';
 
-.short-url-form .card-body > .form-group:last-child,
 .short-url-form p:last-child {
   margin-bottom: 0;
 }

src/short-urls/ShortUrlForm.tsx

@@ -86,15 +86,13 @@ export const ShortUrlForm = (
     </FormGroup>
   );
   const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateInputProps> = {}) => (
-    <div className="form-group">
-      <DateInput
-        selected={shortUrlData[id] ? toDate(shortUrlData[id] as string | Date) : null}
-        placeholderText={placeholder}
-        isClearable
-        onChange={(date) => setShortUrlData({ ...shortUrlData, [id]: date })}
-        {...props}
-      />
-    </div>
+    <DateInput
+      selected={shortUrlData[id] ? toDate(shortUrlData[id] as string | Date) : null}
+      placeholderText={placeholder}
+      isClearable
+      onChange={(date) => setShortUrlData({ ...shortUrlData, [id]: date })}
+      {...props}
+    />
   );
   const basicComponents = (
     <>
@@ -110,9 +108,9 @@ export const ShortUrlForm = (
       </FormGroup>
       <Row>
         {isBasicMode && renderOptionalInput('customSlug', 'Custom slug', 'text', { bsSize: 'lg' }, { className: 'col-lg-6' })}
-        <FormGroup className={isBasicMode ? 'col-lg-6' : 'col-12 mb-0'}>
+        <div className={isBasicMode ? 'col-lg-6' : 'col-12 mb-0'}>
           <TagsSelector selectedTags={shortUrlData.tags ?? []} onChange={changeTags} />
-        </FormGroup>
+        </div>
       </Row>
     </>
   );
@@ -154,12 +152,10 @@ export const ShortUrlForm = (
                           })}
                         </div>
                       </Row>
-                      <FormGroup>
-                        <DomainSelector
-                          value={shortUrlData.domain}
-                          onChange={(domain?: string) => setShortUrlData({ ...shortUrlData, domain })}
-                        />
-                      </FormGroup>
+                      <DomainSelector
+                        value={shortUrlData.domain}
+                        onChange={(domain?: string) => setShortUrlData({ ...shortUrlData, domain })}
+                      />
                     </>
                   )}
                 </SimpleCard>
@@ -169,7 +165,9 @@ export const ShortUrlForm = (
             <div className={limitAccessCardClasses}>
               <SimpleCard title="Limit access to the short URL">
                 {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
-                {renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlData.validUntil ? toDate(shortUrlData.validUntil) : undefined })}
+                <div className="mb-3">
+                  {renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlData.validUntil ? toDate(shortUrlData.validUntil) : undefined })}
+                </div>
                 {renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlData.validSince ? toDate(shortUrlData.validSince) : undefined })}
               </SimpleCard>
             </div>

src/theme/theme.scss

@@ -44,6 +44,7 @@ html:not([data-theme='dark']) {
   --input-text-color: #{$lightInputTextColor};
   --table-border-color: #{$lightTableBorderColor};
   --table-highlight-color: #{$lightTableHighlightColor};
+  --btn-close-filter: initial;
 }
 
 html[data-theme='dark'] {
@@ -60,4 +61,5 @@ html[data-theme='dark'] {
   --input-text-color: #{$darkInputTextColor};
   --table-border-color: #{$darkTableBorderColor};
   --table-highlight-color: #{$darkTableHighlightColor};
+  --btn-close-filter: invert(1);
 }