Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: fix UI issues presented in UI audit #967

Draft
wants to merge 13 commits into
base: main
Choose a base branch
from
Draft

WIP: fix UI issues presented in UI audit #967

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
4c092f6
consistent text field and dropdown border color + radius
import-brain Nov 30, 2024
dad8a0b
rotate caret on onboarding dropdown open
import-brain Nov 30, 2024
2726c97
increase accessibility for disabled onboarding next button
import-brain Nov 30, 2024
231e545
remove border radius on onboarding footer
import-brain Nov 30, 2024
4d42e39
fix dropdown caret
import-brain Nov 30, 2024
fe02564
misc dropdown styling
import-brain Nov 30, 2024
e30f82a
fix dropdown border radius
import-brain Nov 30, 2024
84e53ed
remove border radius from top of dropdown
import-brain Nov 30, 2024
dc48540
move onboarding modal down
import-brain Nov 30, 2024
29520a4
capitalize "A" in "another"
import-brain Nov 30, 2024
da38384
add period
import-brain Nov 30, 2024
701a573
vertically center view button
import-brain Nov 30, 2024
d7ec5ca
run prettier
import-brain Nov 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/assets/constants/scss-variables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ export const largeBreakpoint = '976px';
export const veryLargeBreakpoint = '1347px';
export const largerBreakpoint = '1407px';
export const largestBreakpoint = '1455px';
export const upsideDown = 'rotate(180deg)';
17 changes: 9 additions & 8 deletions src/components/Modals/Onboarding/Onboarding.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ input {
background-color: none;
}
.onboarding {
padding: 1rem;
padding: 2rem 1rem;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there are a lot of Profile + Onboarding css changes that we'll have due to the UI revamp next sem - may need to put changes in those files on hold for now

width: 100%;

&-selectWrapperRow {
Expand Down Expand Up @@ -313,7 +313,6 @@ input {
border-top: 1px solid #e5e5e5;
box-sizing: border-box;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

May want to check in with Joanna on the shadow CSS - we notice there were some inconsistencies across CoursePlan with this so we might as well fix them here

border-radius: 9px;
padding-top: 1rem;
height: 8rem;

Expand Down Expand Up @@ -370,12 +369,13 @@ input {
}

&--disabled {
opacity: 0.3;
opacity: 0.6;
border: 1px solid $sangBlue;
background-color: $disabledGray;

&:hover {
opacity: 0.3;
opacity: 0.6;
cursor: not-allowed;
}
}
}
Expand All @@ -389,10 +389,10 @@ input {
}
&-select {
background: $white;
border: 1px solid $inactiveGray;
border: 0.5px solid $inactiveGray;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like the rest of these fixes, thanks for paying such close attention here! I'm glad we're getting on top of these UI changes so soon


box-sizing: border-box;
border-radius: 1px;
border-radius: 2px;
width: 100%;
font-size: 14px;
line-height: 17px;
Expand Down Expand Up @@ -495,11 +495,12 @@ input {
width: inherit;
background: $white;
box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.25);
border-radius: 7px;
border: 0.5px solid $inactiveGray;
border-radius: 0px 0px 2px 2px;
max-height: 150px;
overflow: auto;

margin-top: 6px;
margin-top: 5px;

&-item {
height: 2.25rem;
Expand Down
6 changes: 3 additions & 3 deletions src/components/Modals/Onboarding/OnboardingBasic.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,15 +124,15 @@
<onboarding-basic-multi-dropdown
:availableChoices="majors"
:dropdownChoices="majorAcronyms"
add-dropdown-text="+ another major"
add-dropdown-text="+ Another major"
@on-select="selectMajor"
@on-remove="removeMajor"
@on-add="addMajor"
/>
<div class="requestForm">
*Don't see your major/minor? We are working hard to add them soon! Get updated when
we add it by signing up
<a href="https://forms.gle/MDvVDoRapUp2VeBb9" target="_blank" class="link">here</a>
<a href="https://forms.gle/MDvVDoRapUp2VeBb9" target="_blank" class="link">here</a>.
</div>
</div>
</div>
Expand All @@ -145,7 +145,7 @@
<onboarding-basic-multi-dropdown
:availableChoices="minors"
:dropdownChoices="minorAcronyms"
add-dropdown-text="+ another minor"
add-dropdown-text="+ Another minor"
@on-select="selectMinor"
@on-remove="removeMinor"
@on-add="addMinor"
Expand Down
14 changes: 12 additions & 2 deletions src/components/Modals/Onboarding/OnboardingBasicSingleDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
/>
<div
class="onboarding-dropdown-placeholder college-major-minor-arrow"
:style="{ borderTopColor: arrowColor }"
:style="{ borderTopColor: arrowColor, transform: arrowDirection }"
></div>
</div>
<div class="onboarding-dropdown-content" v-if="shown">
Expand Down Expand Up @@ -52,7 +52,12 @@
<script lang="ts">
import { PropType, defineComponent } from 'vue';
import { clickOutside } from '@/utilities';
import { inactiveGray, yuxuanBlue, lightPlaceholderGray } from '@/assets/constants/scss-variables';
import {
inactiveGray,
yuxuanBlue,
lightPlaceholderGray,
upsideDown,
} from '@/assets/constants/scss-variables';

export default defineComponent({
props: {
Expand Down Expand Up @@ -85,6 +90,7 @@ export default defineComponent({
stopClose: false,
boxBorder: '',
arrowColor: '',
arrowDirection: '',
placeholderColor: this.choice !== '' ? lightPlaceholderGray : '',
};
},
Expand Down Expand Up @@ -114,13 +120,15 @@ export default defineComponent({
// clicked box when content shown. So then hide content
this.boxBorder = inactiveGray;
this.arrowColor = inactiveGray;
this.arrowDirection = '';
this.curQuery = this.prevQuery;
} else {
box.focus();
this.prevQuery = this.curQuery;
this.curQuery = '';
this.boxBorder = yuxuanBlue;
this.arrowColor = yuxuanBlue;
this.arrowDirection = upsideDown;
}

// scroll the bottom of the graduation year dropdown to scrollBottomToElement
Expand All @@ -141,12 +149,14 @@ export default defineComponent({
this.curQuery = this.prevQuery;
this.boxBorder = inactiveGray;
this.arrowColor = inactiveGray;
this.arrowDirection = '';
}
},
onSelect([acronym, name]: [string, string]) {
const box = this.$refs.selectbox as HTMLInputElement;
this.shown = false;
this.arrowColor = inactiveGray;
this.arrowDirection = '';
this.boxBorder = inactiveGray;
this.placeholderColor = lightPlaceholderGray;
this.$emit('on-select', acronym);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Modals/Onboarding/OnboardingTransferCreditsSource.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
</div>
</div>
<div class="onboarding-addRemoveWrapper">
<button class="onboarding-add" @click="$emit('on-add', examType)">+ another subject</button>
<button class="onboarding-add" @click="$emit('on-add', examType)">+ Another subject</button>
</div>
</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion src/components/Semester/ViewDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,6 @@ export default defineComponent({
border: none;
display: flex;
align-items: center;
padding-bottom: 0.5rem;
&--label {
:hover > & {
color: $viewLabelGray;
Expand Down
Loading