feat: add styles for form elements (#1964) (#1979)

* add styles for form elements: input, radio, checkbox, switch, button. * refactor: remove some style duplication
SwissDataScienceCenter · Aug 2, 2022 · 9c2495d · 9c2495d
1 parent 749c64f
commit 9c2495d
Show file tree

Hide file tree

Showing 34 changed files with 406 additions and 123 deletions.
diff --git a/client/src/collaboration/issue/Issue.js b/client/src/collaboration/issue/Issue.js
@@ -84,6 +84,7 @@ function New(props) {
         <FormGenerator
           title="Create Issue"
           btnName="Create Issue"
+          className="form-rk-green"
           submitCallback={submitCallback}
           model={iFormSchema}
           modelTop={props.model}

diff --git a/client/src/dataset/addtoproject/DatasetAdd.present.js b/client/src/dataset/addtoproject/DatasetAdd.present.js
@@ -87,12 +87,14 @@ function DatasetAdd({ dataset, model, handlers, isDatasetValid, currentStatus, i
       <ButtonGroup className="d-flex">
         <Button disabled={disabled}
           data-cy="add-dataset-existing-project-option-button"
-          color="primary" outline active={!isNewProject} onClick={() => setIsNewProject(false)}>
+          className="btn-rk-green"
+          active={!isNewProject} onClick={() => setIsNewProject(false)}>
           Existing Project
         </Button>
         <Button disabled={disabled}
           data-cy="add-dataset-new-project-option-button"
-          color="primary" outline active={isNewProject} onClick={() => setIsNewProject(true)}>
+          className="btn-rk-green"
+          active={isNewProject} onClick={() => setIsNewProject(true)}>
           New Project
         </Button>
       </ButtonGroup>
@@ -125,7 +127,7 @@ function DatasetAdd({ dataset, model, handlers, isDatasetValid, currentStatus, i
   return (
     <ContainerWrap>
       <Row className="mb-3">
-        <Col md={10} lg={9} xl={8}>
+        <Col md={10} lg={9} xl={8} className="form-rk-green">
           <HeaderAddDataset dataset={dataset} />
           {mainContent}
         </Col>

diff --git a/client/src/file/File.present.js b/client/src/file/File.present.js
@@ -384,16 +384,14 @@ function NotebookDisplayForm(props) {
 
   const overrideControl = (displayMode === NotebookSourceDisplayMode.DEFAULT) ?
     null :
-    <ButtonGroup key="controls" className="rk-btn-group-light mt-2" size="sm">
+    <ButtonGroup key="controls" className="mt-2" size="sm">
       <Button
-        color="rk-white" className="btn-rk-white-dark-active"
         onClick={() => setLocalMode(NotebookSourceDisplayMode.SHOWN)}
         active={displayMode === NotebookSourceDisplayMode.SHOWN}
       >
         Visible
       </Button>
       <Button
-        color="rk-white" className="btn-rk-white-dark-active"
         onClick={() => setLocalMode(NotebookSourceDisplayMode.HIDDEN)}
         active={displayMode === NotebookSourceDisplayMode.HIDDEN}
       >
@@ -413,7 +411,9 @@ function NotebookDisplayForm(props) {
           onChange={() => { setOverride(displayMode === NotebookSourceDisplayMode.DEFAULT); }} />
         <Label for="code-visibility-override" check className="me-4">Override Code Visibility</Label>
       </div>
-      {overrideControl}
+      <div className="form-rk-green">
+        {overrideControl}
+      </div>
     </ListGroupItem>
   </ListGroup>;
 }

diff --git a/client/src/file/FileAndLineageComponents.js b/client/src/file/FileAndLineageComponents.js
@@ -30,16 +30,19 @@ function FileAndLineageSwitch(props) {
     props.history.push(props.switchToPath);
   };
 
-  return <ButtonGroup className="rk-btn-group-light" size="sm">
-    <Button color="rk-white" className="btn-rk-white-dark-active"
-      onClick={performSwitch} active={props.insideFile}>
-      <FontAwesomeIcon icon={faFile} />
-    </Button>
-    <Button color="rk-white" className="btn-rk-white-dark-active"
-      onClick={performSwitch} active={!props.insideFile}>
-      <FontAwesomeIcon icon={faProjectDiagram} />
-    </Button>
-  </ButtonGroup>;
+  return (
+    <div className="form-rk-green">
+      <ButtonGroup size="sm">
+        <Button
+          onClick={performSwitch} active={props.insideFile}>
+          <FontAwesomeIcon icon={faFile} />
+        </Button>
+        <Button
+          onClick={performSwitch} active={!props.insideFile}>
+          <FontAwesomeIcon icon={faProjectDiagram} />
+        </Button>
+      </ButtonGroup>
+    </div>);
 }
 
 export { FileAndLineageSwitch };
diff --git a/client/src/notebooks/NotebookStart.present.js b/client/src/notebooks/NotebookStart.present.js
@@ -160,7 +160,7 @@ function StartNotebookServer(props) {
         <ProjectSessionLockAlert lockStatus={props.lockStatus} />
         <LaunchErrorAlert autosaves={autosaves} launchError={props.launchError} ci={props.ci} />
         {messageOutput}
-        <Form>
+        <Form className="form-rk-green">
           {advancedSelection}
           {options}
           {loader}
@@ -1018,21 +1018,22 @@ class ServerOptionEnum extends Component {
     if (selected && options && options.length && !options.includes(selected))
       options = options.concat(selected);
     if (options.length === 1)
-      return (<Badge color="primary">{this.props.options[0]}</Badge>);
+      return (<Badge className="btn-outline-rk-green text-white">{this.props.options[0]}</Badge>);
 
     return (
-      <ButtonGroup className="rk-btn-group-light" >
+      <ButtonGroup>
         {options.map((optionName, i) => {
           let color = "rk-white";
           if (optionName === selected) {
             color = this.props.warning != null && this.props.warning === optionName ?
               "danger" :
-              "rk-white";
+              undefined;
           }
           const size = this.props.size ? this.props.size : null;
           return (
             <Button
-              key={optionName} color={color} size={size} disabled={disabled} active={optionName === selected}
+              key={optionName} color={color} className="btn-outline-rk-green" size={size}
+              disabled={disabled} active={optionName === selected}
               onClick={event => this.props.onChange(event, optionName)}>{optionName}</Button>
           );
         })}
@@ -1244,7 +1245,7 @@ class AutosavedDataModal extends Component {
             <p>Please refer to this {docsLink} to get further information.</p>
           </ModalBody>
           <ModalFooter>
-            <Button color="primary" onClick={this.props.handlers.startServer}>Launch session</Button>
+            <Button className="btn-rk-green" onClick={this.props.handlers.startServer}>Launch session</Button>
           </ModalFooter>
         </Modal>
       </div>

diff --git a/client/src/notebooks/Notebooks.present.js b/client/src/notebooks/Notebooks.present.js
@@ -158,7 +158,7 @@ function SessionInformation(props) {
     className="btn-outline-rk-green" url={url} disabled={stopping} showLinkIcon={true} title="Open" />;
   const menu = ready ?
     (
-      <ButtonWithMenu className="sessionsButton" color="rk-blue" size="sm" default={defaultAction}>
+      <ButtonWithMenu className="sessionsButton" size="sm" default={defaultAction}>
         {stopButton}
       </ButtonWithMenu>
     ) :

diff --git a/client/src/project/datasets/change/DatasetChange.present.js b/client/src/project/datasets/change/DatasetChange.present.js
@@ -108,6 +108,7 @@ function DatasetChange(props) {
     showAddDatasetOptions={!edit}
     addDatasetOptionSelected="addDataset"
     setShowHeader={setShowHeader}
+    className="form-rk-pink"
   />;
 
   const title = edit ? "Modify Dataset" : "Add Dataset";

diff --git a/client/src/project/datasets/import/DatasetImport.present.js b/client/src/project/datasets/import/DatasetImport.present.js
@@ -59,6 +59,7 @@ function DatasetImport(props) {
       showAddDatasetOptions={true}
       addDatasetOptionSelected="importDataset"
       setShowHeader={setShowHeader}
+      className="form-rk-pink"
     />);
 
   const title = "Import Dataset";

diff --git a/client/src/project/filestreeview/FilesTreeView.js b/client/src/project/filestreeview/FilesTreeView.js
@@ -114,14 +114,12 @@ class TreeContainer extends Component {
 
     return (
       <div className="d-flex flex-column" style={style}>
-        <div className="d-block">
-          <ButtonGroup className="d-flex rk-btn-group-light">
-            <Button color="rk-white" className="btn-rk-white-dark-active"
-              onClick={togglePage} active={fileView}>
+        <div className="d-block form-rk-green">
+          <ButtonGroup className="d-flex">
+            <Button onClick={togglePage} active={fileView}>
               Contents
             </Button>
-            <Button color="rk-white" className="btn-rk-white-dark-active"
-              onClick={togglePage} active={!fileView}>
+            <Button onClick={togglePage} active={!fileView}>
               Lineage
             </Button>
           </ButtonGroup>

diff --git a/client/src/project/new/Project.style.css b/client/src/project/new/Project.style.css
@@ -6,6 +6,7 @@
 
 .react-autosuggest__input--focused {
   outline: none;
+  border-bottom-width: 0;
 }
 
 .react-autosuggest__input--open {
@@ -20,13 +21,24 @@
 .react-autosuggest__suggestions-container--open {
   display: block;
   position: absolute;
-  top: 40px;
+  top: 38px;
   width: 100%;
   border: 1px solid #aaa;
+  border-top-width: 0;
   background-color: #fff;
   z-index: 2;
   max-height: 560px;
   overflow-y: auto;
+  border-radius: 0 0 8px 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.form-rk-green .react-autosuggest__suggestions-container--open {
+  border-color: var(--bs-rk-green);
+}
+
+.form-rk-pink .react-autosuggest__suggestions-container--open {
+  border-color: var(--bs-rk-pink);
 }
 
 .react-autosuggest__suggestions-list {
@@ -49,7 +61,7 @@
 }
 
 .react-autosuggest__section-container {
-  border-top: 1px solid #ccc;
+  border: 1px solid var(--bs-rk-border-input);
 }
 
 .react-autosuggest__section-container--first {
@@ -78,8 +90,8 @@ svg.no-pointer {
   line-height: 1.5;
   color: #495057;
   vertical-align: middle;
-  background-color: #fff;
-  border: 1px solid #ced4da;
+  background-color: white;
+  border: 1px solid var(--bs-rk-border-input);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -90,6 +102,13 @@ svg.no-pointer {
   border: 1px solid #ced4da;
 }
 
+.form-rk-green .react-autosuggest__container > input:focus {
+  border-radius: 8px 8px 0 0;
+  border-width: 1px;
+  border-color: var(--bs-rk-green);
+
+}
+
 .react-autosuggest__container > input::-ms-clear{
   display: none !important;
   content: none !important;

diff --git a/client/src/project/new/ProjectNew.present.js b/client/src/project/new/ProjectNew.present.js
@@ -186,12 +186,12 @@ function ForkProjectContent(props) {
   };
 
   return (
-    <Fragment>
+    <div className="form-rk-green">
       <Title handlers={handlers} input={input} meta={meta} />
       <Namespaces handlers={handlers} input={input} namespaces={namespaces} user={user} />
       <ProjectIdentifier input={input} isRequired={true} />
       <Visibility handlers={handlers} input={input} meta={meta}/>
-    </Fragment>
+    </div>
   );
 }
 
@@ -215,7 +215,7 @@ const NewProjectForm = (
 
   const errorTemplateAlert = <ErrorTemplateFeedback templates={templates} meta={meta} input={input}/>;
   return (
-    <Form data-cy="create-project-form" className="mb-4">
+    <Form data-cy="create-project-form" className="form-rk-green mb-4">
       {creation}
       <Automated automated={automated} removeAutomated={handlers.removeAutomated} />
       <Title handlers={handlers} meta={meta} input={input} />

diff --git a/client/src/project/new/components/ShareLinkModal.js b/client/src/project/new/components/ShareLinkModal.js
@@ -126,7 +126,7 @@ function ShareLinkModal(props) {
 
   const labels = Object.keys(include).map(item => (
     <FormGroup key={item} check>
-      <Label check className={`text-capitalize${available[item] ? "" : " text-muted"}`}>
+      <Label check className={`text-capitalize${available[item] ? " cursor-pointer" : " text-muted cursor-pointer"}`}>
         <Input
           type="checkbox"
           disabled={available[item] ? false : true}
@@ -159,7 +159,7 @@ function ShareLinkModal(props) {
               You can control which values should be pre-filled.
             </p>
 
-            <Form className="mb-3">
+            <Form className="mb-3 form-rk-green">
               {labels}
               {feedback}
             </Form>

diff --git a/client/src/project/new/components/TemplateSource.tsx b/client/src/project/new/components/TemplateSource.tsx
@@ -42,17 +42,13 @@ const TemplateSource = ({ handlers, input, isRequired }: TemplateSourceProps) =>
       <br />
       <ButtonGroup size="sm">
         <Button
-          color="primary"
-          outline
           active={!input.userRepo}
           data-cy="renkulab-source-button"
           onClick={(_e: unknown) => handlers.setProperty("userRepo", false)}
         >
           RenkuLab
         </Button>
         <Button
-          color="primary"
-          outline
           active={!!input.userRepo}
           data-cy="custom-source-button"
           onClick={(_e: unknown) => handlers.setProperty("userRepo", true)}

diff --git a/client/src/project/new/components/UserTemplate.js b/client/src/project/new/components/UserTemplate.js
@@ -152,7 +152,7 @@ class UserTemplate extends Component {
         </FormGroup>
         <FormGroup className="field-group">
           <Button
-            id="fetch-custom-templates" color="primary" size="sm"
+            id="fetch-custom-templates" className="btn-outline-rk-green" size="sm"
             data-cy="fetch-templates-button"
             onClick={() => this.fetchTemplates()}>Fetch templates
           </Button>

diff --git a/client/src/project/settings/ProjectSettings.present.js b/client/src/project/settings/ProjectSettings.present.js
@@ -87,7 +87,7 @@ function ProjectSettingsGeneral(props) {
     return gitCommands;
 
   return (
-    <Fragment>
+    <div className="form-rk-green">
       <Row className="mt-2">
         <Col xs={12} lg={6}>
           <ProjectTags
@@ -107,7 +107,7 @@ function ProjectSettingsGeneral(props) {
             settingsReadOnly={props.settingsReadOnly} />
         </Col>
       </Row>
-    </Fragment>
+    </div>
   );
 }
 
@@ -517,7 +517,9 @@ function SessionsDiv(props) {
   return (
     <div className="mt-2">
       <h3>Session settings</h3>
-      {props.children}
+      <div className="form-rk-green">
+        {props.children}
+      </div>
     </div>
   );
 }
@@ -619,7 +621,9 @@ function SessionsElement(props) {
         <Label className="me-2">{rendering.displayName} {labelLoader}{labelDone}</Label>
         {separator}
         <ServerOptionEnum {...rendering} selected={newValueApplied ? newValue : projectDefault}
-          onChange={onChange} warning={warning ? projectDefault : null} disabled={disabled} />
+          onChange={onChange} warning={warning ? projectDefault : null} disabled={disabled}
+          className="btn-outline-rk-green"
+        />
         {reset}
         {info ? (<Fragment><br />{info}</Fragment>) : null}
       </FormGroup>
@@ -744,12 +748,12 @@ function SessionPinnedImage(props) {
   let image;
   if (modifyString) {
     image = (<Fragment>
-      <InputGroup disabled={disabled}>
+      <InputGroup disabled={disabled} className="input-left">
         <Input value={newString} onChange={e => setNewString(e.target.value)} />
-        <Button id="advanced_image_confirm" color="secondary" onClick={() => setValue(newString)}>
+        <Button id="advanced_image_confirm" className="btn btn-rk-green m-0" onClick={() => setValue(newString)}>
           <FontAwesomeIcon icon={faCheck} />
         </Button>
-        <Button id="advanced_image_back" color="outline-primary" onClick={toggleModifyString}
+        <Button id="advanced_image_back" className="btn btn-outline-rk-green m-0" onClick={toggleModifyString}
           style={{ borderLeft: 0 }}>
           <FontAwesomeIcon icon={faTrash} />
         </Button>