From 52be3c11ef7eb79312a06a2ba8719bb38f05d176 Mon Sep 17 00:00:00 2001
From: ADITYA VIKRAM <adityavikram2016@gmail.com>
Date: Wed, 10 Sep 2025 10:28:34 -0400
Subject: [PATCH 1/6] wording fix in readme

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index aafe3c0f..522b0123 100644
--- a/README.md
+++ b/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)).
 

From 0b151e559b85e3e574b9232c1741300beeb0e55e Mon Sep 17 00:00:00 2001
From: llf5185 <llf5185@rit.edu>
Date: Tue, 23 Sep 2025 15:10:24 -0400
Subject: [PATCH 2/6] Re-added focus outline to CSS button class

---
 ui/src/css/components/modal.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/ui/src/css/components/modal.css b/ui/src/css/components/modal.css
index 6b484a56..beb3d883 100644
--- a/ui/src/css/components/modal.css
+++ b/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);
 }

From 46bb18c3a78129e7babada6e38eadbc10bd66309 Mon Sep 17 00:00:00 2001
From: llf5185 <llf5185@rit.edu>
Date: Wed, 24 Sep 2025 09:13:37 -0400
Subject: [PATCH 3/6] Improved visual clarity of proposal button outline

This change is to remedy the issue in the previous commit where the
focused outline color (which was white) of the proposal submission
buttons would blend in with the page background.
---
 ui/src/css/components/proposal.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/src/css/components/proposal.css b/ui/src/css/components/proposal.css
index ca600fbb..eef18883 100644
--- a/ui/src/css/components/proposal.css
+++ b/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;

From ee446da16898f294c21113015e56120ce4993387 Mon Sep 17 00:00:00 2001
From: llf5185 <llf5185@rit.edu>
Date: Wed, 24 Sep 2025 16:39:28 -0400
Subject: [PATCH 4/6] Improve button outline visual clarity for Dev Menu

---
 .../util/components/DevSignInModalContent.js      | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/util/components/DevSignInModalContent.js b/ui/src/components/util/components/DevSignInModalContent.js
index 5c40f9b2..ee0d9345 100644
--- a/ui/src/components/util/components/DevSignInModalContent.js
+++ b/ui/src/components/util/components/DevSignInModalContent.js
@@ -326,7 +326,14 @@ export default function DevSignInModalContent() {
                 </Dropdown>
               </div>
               <div>
-                <Button color="orange" onClick={signInAsUser}>
+                <Button
+                  color="orange"
+                  onClick={signInAsUser}
+                  style={{
+                    outlineColor: "var(--border-color)",
+                    outlineOffset: "2px",
+                  }}
+                >
                   {" "}
                   <Icon name="sign-in" />
                   Sign In
@@ -343,6 +350,10 @@ export default function DevSignInModalContent() {
                     history.push("/");
                     window.location.reload();
                   }}
+                  style={{
+                    outlineColor: "var(--border-color)",
+                    outlineOffset: "2px",
+                  }}
                 >
                   {" "}
                   <Icon name="sign-out" />
@@ -448,7 +459,7 @@ export default function DevSignInModalContent() {
                   }
                 }}
                 disabled={loading}
-                style={{ marginTop: 12, width: "100%" }}
+                style={{ marginTop: 12, width: "100%", outlineColor: "var(--border-color)", outlineOffset: "2px"}}
                 size="large"
               >
                 {loading ? (

From 69ec6775b4a6c824a61bb0dd66e44c02ee9677cf Mon Sep 17 00:00:00 2001
From: llf5185 <llf5185@rit.edu>
Date: Mon, 6 Oct 2025 12:56:21 -0400
Subject: [PATCH 5/6] Created class for dev button outline

Created a class for the outline stylization used on the developer menu buttons for clarity
---
 .../util/components/DevSignInModalContent.js       | 14 +++++---------
 ui/src/css/utils/helpers.css                       |  5 +++++
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/util/components/DevSignInModalContent.js b/ui/src/components/util/components/DevSignInModalContent.js
index ee0d9345..069dfc1a 100644
--- a/ui/src/components/util/components/DevSignInModalContent.js
+++ b/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";
 
 /**
@@ -328,11 +329,8 @@ export default function DevSignInModalContent() {
               <div>
                 <Button
                   color="orange"
+                  className="offset-outline"
                   onClick={signInAsUser}
-                  style={{
-                    outlineColor: "var(--border-color)",
-                    outlineOffset: "2px",
-                  }}
                 >
                   {" "}
                   <Icon name="sign-in" />
@@ -340,6 +338,7 @@ export default function DevSignInModalContent() {
                 </Button>
                 <Button
                   secondary
+                  className="offset-outline"
                   onClick={() => {
                     // Delete all cookies
                     let cookies = document.cookie.split(";");
@@ -350,10 +349,6 @@ export default function DevSignInModalContent() {
                     history.push("/");
                     window.location.reload();
                   }}
-                  style={{
-                    outlineColor: "var(--border-color)",
-                    outlineOffset: "2px",
-                  }}
                 >
                   {" "}
                   <Icon name="sign-out" />
@@ -399,6 +394,7 @@ export default function DevSignInModalContent() {
 
               <Button
                 color="red"
+                className="offset-outline"
                 onClick={async () => {
                   setLoading(true);
 
@@ -459,7 +455,7 @@ export default function DevSignInModalContent() {
                   }
                 }}
                 disabled={loading}
-                style={{ marginTop: 12, width: "100%", outlineColor: "var(--border-color)", outlineOffset: "2px"}}
+                style={{ marginTop: 12, width: "100%", }}
                 size="large"
               >
                 {loading ? (
diff --git a/ui/src/css/utils/helpers.css b/ui/src/css/utils/helpers.css
index b553d72c..49977084 100644
--- a/ui/src/css/utils/helpers.css
+++ b/ui/src/css/utils/helpers.css
@@ -150,3 +150,8 @@ a,
 .icon {
   background-color: transparent;
 }
+
+.offset-outline, .button.offset-outline {
+  outline-color: var(--border-color);
+  outline-offset: 2px;
+}
\ No newline at end of file

From e093699d07db51d11974fb503d766b9810cbfa1f Mon Sep 17 00:00:00 2001
From: llf5185 <llf5185@rit.edu>
Date: Fri, 10 Oct 2025 12:49:16 -0400
Subject: [PATCH 6/6] Added offset outline to action submission buttons

Added the outline-offset class to the timeline action submission buttons to improve
their visual clarity. And added specifier for focus pseudo-class to offset-outline
class to increase its specificity. Without this change in specificity, the class's
outline-color property would be overridden by the one given to button:focus in modal.css
---
 .../Tabs/DashboardTab/TimelinesView/Timeline/ActionModal.js   | 4 ++++
 ui/src/css/utils/helpers.css                                  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/Tabs/DashboardTab/TimelinesView/Timeline/ActionModal.js b/ui/src/components/Tabs/DashboardTab/TimelinesView/Timeline/ActionModal.js
index 15b62c91..ea62d738 100644
--- a/ui/src/components/Tabs/DashboardTab/TimelinesView/Timeline/ActionModal.js
+++ b/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();
diff --git a/ui/src/css/utils/helpers.css b/ui/src/css/utils/helpers.css
index 49977084..b65c1f82 100644
--- a/ui/src/css/utils/helpers.css
+++ b/ui/src/css/utils/helpers.css
@@ -151,7 +151,7 @@ a,
   background-color: transparent;
 }
 
-.offset-outline, .button.offset-outline {
+.offset-outline, .button.offset-outline, .button.offset-outline:focus {
   outline-color: var(--border-color);
   outline-offset: 2px;
 }
\ No newline at end of file