Merge pull request #4370 from webkom/ivarnakken/aba-557-make-the-drop…

…down-menu-under-grupper-have-a-dark-theme Employ the correct SelectInput everywhere
webkom · Dec 23, 2023 · 7f7c9dc · 7f7c9dc
2 parents 0d4cbd2 + c0c8998
commit 7f7c9dc
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 49 deletions.
diff --git a/app/components/Form/SelectInput.tsx b/app/components/Form/SelectInput.tsx
@@ -78,7 +78,7 @@ const SelectInput = <Option, IsMulti extends boolean = false>({
   label,
   fetching,
   selectStyle,
-  onBlur,
+  onBlur = () => {},
   isValidNewOption,
   value,
   options = [],

diff --git a/app/components/Tooltip/index.tsx b/app/components/Tooltip/index.tsx
@@ -69,7 +69,7 @@ const Tooltip = ({
       style={style}
       onClick={onClick}
       ref={triggerRef}
-      onMouseEnter={() => setHovered(true)}
+      onMouseEnter={() => setHovered(!disabled && true)}
       onMouseLeave={() => setHovered(false)}
     >
       {children}

diff --git a/app/routes/admin/groups/components/AddGroupMember.tsx b/app/routes/admin/groups/components/AddGroupMember.tsx
@@ -1,6 +1,5 @@
 import { Field, SubmissionError } from 'redux-form';
-import { legoForm, Button, Form } from 'app/components/Form';
-import SelectInput from 'app/components/Form/SelectInput';
+import { legoForm, Button, Form, SelectInput } from 'app/components/Form';
 import { ROLES, type RoleType } from 'app/utils/constants';
 import { createValidator, required } from 'app/utils/validation';
 import type { AddMemberArgs } from 'app/actions/GroupActions';

diff --git a/app/routes/admin/groups/components/GroupMembersList.tsx b/app/routes/admin/groups/components/GroupMembersList.tsx
@@ -2,7 +2,7 @@ import { ConfirmModal, Flex, Icon } from '@webkom/lego-bricks';
 import qs from 'qs';
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
-import Select from 'react-select';
+import { SelectInput } from 'app/components/Form';
 import Table from 'app/components/Table';
 import { isCurrentUser as checkIfCurrentUser } from 'app/routes/users/utils';
 import { ROLES, type RoleType } from 'app/utils/constants';
@@ -81,12 +81,11 @@ const GroupMembersList = ({
 
     if (membershipsInEditMode[id]) {
       return (
-        <Select
+        <SelectInput
           value={{
             value: role,
             label: ROLES[role],
           }}
-          placeholder="tre"
           options={Object.keys(ROLES).map((key: RoleType) => ({
             value: key,
             label: ROLES[key],

diff --git a/app/routes/companyInterest/components/CompanyInterestList.tsx b/app/routes/companyInterest/components/CompanyInterestList.tsx
@@ -1,9 +1,8 @@
 import { Button, ConfirmModal, Flex, Icon } from '@webkom/lego-bricks';
 import { Component } from 'react';
 import { Link } from 'react-router-dom';
-import Select from 'react-select';
 import { Content } from 'app/components/Content';
-import { selectTheme, selectStyles } from 'app/components/Form/SelectInput';
+import SelectInput from 'app/components/Form/SelectInput';
 import Table from 'app/components/Table';
 import Tooltip from 'app/components/Tooltip';
 import { ListNavigation } from 'app/routes/bdb/utils';
@@ -186,16 +185,14 @@ class CompanyInterestList extends Component<Props, State> {
           <Flex column>
             <p>
               Her finner du all praktisk informasjon knyttet til
-              <strong> bedriftsinteresser</strong>.
+              bedriftsinteresser
             </p>
-            <Select
+            <SelectInput
               name="form-semester-selector"
               value={this.props.selectedSemesterOption}
               onChange={this.handleSemesterChange}
               options={semesterOptions}
               isClearable={false}
-              theme={selectTheme}
-              styles={selectStyles}
             />
           </Flex>
           <Link to="/companyInterest/semesters">
@@ -213,14 +210,12 @@ class CompanyInterestList extends Component<Props, State> {
           className={styles.section}
         >
           <Flex column>
-            <Select
+            <SelectInput
               name="form-event-selector"
               value={this.props.selectedEventOption}
               onChange={this.handleEventChange}
               options={EVENT_TYPE_OPTIONS}
               isClearable={false}
-              theme={selectTheme}
-              styles={selectStyles}
             />
           </Flex>
 

diff --git a/app/routes/events/components/EventList.tsx b/app/routes/events/components/EventList.tsx
@@ -2,11 +2,9 @@ import { Button, Icon, LoadingIndicator } from '@webkom/lego-bricks';
 import { isEmpty, orderBy } from 'lodash';
 import moment from 'moment-timezone';
 import { Helmet } from 'react-helmet-async';
-import Select from 'react-select';
 import EmptyState from 'app/components/EmptyState';
 import EventItem from 'app/components/EventItem';
-import { CheckBox } from 'app/components/Form/';
-import { selectTheme, selectStyles } from 'app/components/Form/SelectInput';
+import { CheckBox, SelectInput } from 'app/components/Form/';
 import { EventTime } from 'app/models';
 import useQuery from 'app/utils/useQuery';
 import EventFooter from './EventFooter';
@@ -229,7 +227,7 @@ const EventList = ({
             marginLeft: '10px',
           }}
         />
-        <Select
+        <SelectInput
           name="form-field-name"
           value={regDateFilter}
           onChange={(selectedOption) =>
@@ -239,8 +237,6 @@ const EventList = ({
           className={styles.select}
           options={filterRegDateOptions}
           isClearable={false}
-          theme={selectTheme}
-          styles={selectStyles}
         />
       </div>
       <EventListGroup

diff --git a/app/routes/quotes/components/QuotePage.tsx b/app/routes/quotes/components/QuotePage.tsx
@@ -1,8 +1,7 @@
 import { LoadingIndicator, Button } from '@webkom/lego-bricks';
 import cx from 'classnames';
 import { Helmet } from 'react-helmet-async';
-import Select from 'react-select';
-import { selectTheme, selectStyles } from 'app/components/Form/SelectInput';
+import { SelectInput } from 'app/components/Form';
 import { defaultQuotesQuery } from 'app/routes/quotes/QuotesRoute';
 import useQuery from 'app/utils/useQuery';
 import { navigation } from '../utils';
@@ -101,15 +100,13 @@ export default function QuotePage({
       {!isSingle && (
         <div className={styles.select}>
           <div>Sorter etter:</div>
-          <Select
+          <SelectInput
             name="sorting_selector"
             value={ordering}
             onChange={(option) =>
               option && setQueryValue('ordering')(option.value)
             }
             isClearable={false}
-            theme={selectTheme}
-            styles={selectStyles}
             options={orderingOptions}
           />
         </div>

diff --git a/app/routes/surveys/components/Submissions/Results.tsx b/app/routes/surveys/components/Submissions/Results.tsx
@@ -1,10 +1,9 @@
 import { produce } from 'immer';
-import Select from 'react-select';
 import DistributionBarChart from 'app/components/Chart/BarChart';
 import ChartLabel from 'app/components/Chart/ChartLabel';
 import DistributionPieChart from 'app/components/Chart/PieChart';
 import { CHART_COLORS } from 'app/components/Chart/utils';
-import { selectTheme, selectStyles } from 'app/components/Form/SelectInput';
+import SelectInput from 'app/components/Form/SelectInput';
 import InfoBubble from 'app/components/InfoBubble';
 import Tag, { type TagColors } from 'app/components/Tags/Tag';
 import {
@@ -250,7 +249,7 @@ const Results = ({
                   </div>
                   {editSurvey && (
                     <div className={styles.selectGraphContainer}>
-                      <Select
+                      <SelectInput
                         className={styles.selectGraph}
                         value={{
                           value: question.displayType,
@@ -285,12 +284,6 @@ const Results = ({
                         isClearable={false}
                         backspaceRemoves={false}
                         isSearchable={false}
-                        onBlur={() => null}
-                        style={{
-                          paddingTop: '7px',
-                        }}
-                        theme={selectTheme}
-                        styles={selectStyles}
                       />
                     </div>
                   )}

diff --git a/app/routes/users/components/GroupChange.tsx b/app/routes/users/components/GroupChange.tsx
@@ -1,7 +1,6 @@
 import { Button, Flex } from '@webkom/lego-bricks';
 import { Component } from 'react';
-import Select from 'react-select';
-import { selectTheme, selectStyles } from 'app/components/Form/SelectInput';
+import SelectInput from 'app/components/Form/SelectInput';
 import type { Group, ID } from 'app/models';
 
 type Props = {
@@ -62,15 +61,12 @@ class GroupChange extends Component<Props, State> {
     }));
     return (
       <Flex column gap={10}>
-        <Select
+        <SelectInput
           name="form-field-name"
           value={this.state.selectedOption || initalOption}
           onChange={this.handleChange}
           options={[noLongerStudent, ...options]}
           isClearable={false}
-          theme={selectTheme}
-          styles={selectStyles}
-          instanceId="profile-group"
         />
         {this.state.selectedOption && (
           <Button secondary onClick={this.handleOnClick}>

diff --git a/app/routes/users/components/PhotoConsents.tsx b/app/routes/users/components/PhotoConsents.tsx
@@ -1,8 +1,7 @@
 import { Button, ConfirmModal, Flex } from '@webkom/lego-bricks';
 import moment from 'moment-timezone';
 import { useState } from 'react';
-import Select from 'react-select';
-import { selectStyles, selectTheme } from 'app/components/Form/SelectInput';
+import SelectInput from 'app/components/Form/SelectInput';
 import { PhotoConsentDomain } from 'app/models';
 import { getConsent, toReadableSemester } from 'app/routes/events/utils';
 import styles from './PhotoConsents.css';
@@ -128,9 +127,9 @@ const PhotoConsents = ({
       <label htmlFor="select-semester">
         <h3>Semester</h3>
       </label>
-      <Select
+      <SelectInput
         name="select-semester"
-        clearable={false}
+        isClearable={false}
         options={semesterOptions}
         value={selectedSemesterOption}
         onChange={({ value }) =>
@@ -139,9 +138,6 @@ const PhotoConsents = ({
             value,
           })
         }
-        theme={selectTheme}
-        styles={selectStyles}
-        instanceId="profile-consent-semester"
       />
       <ConsentManager
         consent={getConsent(