Button outlines (#325)

README.md

@@ -48,7 +48,7 @@ _**On first login, new user must change password by using the `passwd` command**
 
 - ### Using Local Setup
   - Run `install.ps1` (recommended) or `install.bat` (legacy) or `install.sh` (on linux) to get dependencies set up locally
-    - `install.ps1` supports performing a clean installation by using the `-CleanInstall` flag. Use this if you encounter a `npm install` failure. Caution: Ensure you have commited/pushed any important changes before running this command.
+    - `install.ps1` supports performing a clean installation by using the `-CleanInstall` flag. Use this if you encounter a `npm install` failure. **Caution:** Ensure you have commited/pushed any important changes before running this command with the `-CleanInstall` flag.
     - `install.ps1` also supports skipping initializing the server or the ui, using the `-SkipServer` and `-SkipUI` flags.
   - You will need to manually install the Prettier extension on your IDE ([for VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)) ([for IntelliJ](https://plugins.jetbrains.com/plugin/10456-prettier)).
 

ui/src/components/Tabs/DashboardTab/TimelinesView/Timeline/ActionModal.js

@@ -26,6 +26,7 @@ import InnerHTML from "dangerously-set-html-content";
 import ParsedInnerHTML from "../../../../util/components/ParsedInnerHtml";
 import CoachFeedBack from "../../../../util/components/CoachFeedBack";
 import { QuestionComponentsMap } from "../../../../util/components/PeerEvalComponents";
+import "./../../../../../css/utils/helpers.css"
 
 const MODAL_STATUS = {
   SUCCESS: "success",
@@ -476,6 +477,7 @@ export default function ActionModal(props) {
       ` This action can be submitted on ${formatDateTime(props.start_date)}`
     ) : (
       <Button
+        className="offset-outline"
         content={
           user.isMock
             ? `Submitting ${user.mockUser.fname} ${user.mockUser.lname} as ${user.fname} ${user.lname}`
@@ -580,6 +582,7 @@ export default function ActionModal(props) {
         </Modal.Content>
         <Modal.Actions>
           <Button
+            className="offset-outline"
             color="grey"
             onClick={() => {
               onActionCancel();
@@ -672,6 +675,7 @@ export default function ActionModal(props) {
         </Modal.Content>
         <Modal.Actions>
           <Button
+            className="offset-outline"
             color="grey"
             onClick={() => {
               onActionCancel();

ui/src/components/util/components/DevSignInModalContent.js

@@ -13,6 +13,7 @@ import {
   DropdownDivider,
   DropdownHeader,
 } from "semantic-ui-react";
+import "./../../../css/utils/helpers.css"
 import _ from "lodash";
 
 /**
@@ -326,13 +327,18 @@ export default function DevSignInModalContent() {
                 </Dropdown>
               </div>
               <div>
-                <Button color="orange" onClick={signInAsUser}>
+                <Button
+                  color="orange"
+                  className="offset-outline"
+                  onClick={signInAsUser}
+                >
                   {" "}
                   <Icon name="sign-in" />
                   Sign In
                 </Button>
                 <Button
                   secondary
+                  className="offset-outline"
                   onClick={() => {
                     // Delete all cookies
                     let cookies = document.cookie.split(";");
@@ -388,6 +394,7 @@ export default function DevSignInModalContent() {
 
               <Button
                 color="red"
+                className="offset-outline"
                 onClick={async () => {
                   setLoading(true);
 
@@ -448,7 +455,7 @@ export default function DevSignInModalContent() {
                   }
                 }}
                 disabled={loading}
-                style={{ marginTop: 12, width: "100%" }}
+                style={{ marginTop: 12, width: "100%", }}
                 size="large"
               >
                 {loading ? (

ui/src/css/components/modal.css

@@ -11,6 +11,11 @@ a.ui.button {
   margin-bottom: 0.5em;
 }
 
+.button:focus {
+  outline: medium auto;
+  outline-color: auto;
+}
+
 .ui.dimmer .ui.workaround.loader {
   color: var(--text-primary);
 }

ui/src/css/components/proposal.css

@@ -84,6 +84,10 @@ input[id^="hidden_"]:invalid {
   align-items: center;
 }
 
+.proposal-submit-buttons .button:focus {
+  outline-color: var(--border-color);
+}
+
 .project-editor-input-container {
   display: flex;
   flex-direction: column;

ui/src/css/utils/helpers.css

@@ -150,3 +150,8 @@ a,
 .icon {
   background-color: transparent;
 }
+
+.offset-outline, .button.offset-outline, .button.offset-outline:focus {
+  outline-color: var(--border-color);
+  outline-offset: 2px;
+}