Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Phani | 1204633988335095 | [Bug] Alignment and CSS issue introduced b…
Browse files Browse the repository at this point in the history
…y Carbon (#279)

* Recurring Appointments

* Recurring Appointments

* Update locale

* Refactor Tags to use carbon components

* Update CSS styling for recurring appointments

* Update CSS to use inline-block

* Update CSS for Time Picker

* Update CSS for Time Picker for regular appointments

* Fix failing tests

* Disable autocomplete

* Modify the dropdown option

* Cleanup unused

* Cleanup unused

* Fix build

* Refactor labels for Recurring appointments

* Fix theme

* Add font family to label

* Fix font for Repeats on label

* Change Error Messages font to carbon style
Phanindra-tw committed Jan 19, 2024
1 parent 5d9ed8b commit 1633760
Showing 9 changed files with 44 additions and 9 deletions.
30 changes: 27 additions & 3 deletions ui/react-components/carbon-theme.scss
Original file line number Diff line number Diff line change
@@ -3,13 +3,32 @@ $interactive-02: #393939;
$ui-05: #D0E2FF;
$inverse-01: #0a74ff;
$border-inverse: #0a74ff;
$css--default-type: false;
$css--reset: false;
$css--body: false;
@import "~carbon-components/scss/globals/scss/styles.scss";
.bx--content-switcher-btn.bx--content-switcher--selected{
border: solid;
[class*="bx--"]{
font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}
.bx--content-switcher-btn{
$radius: 4px;
border-radius: 0;
color: #0a74ff;
border-color: #A6C8FF;
&:first-child{
border-top-left-radius: $radius;
border-bottom-left-radius: $radius;
}
&:last-child{
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
}
&.bx--content-switcher--selected{
border: solid;
}
&:after{
background-color: #edf5ff;
}
}
.bx--btn--primary:hover{
background-color: #669999;
@@ -63,4 +82,9 @@ $border-inverse: #0a74ff;
.bx--list--nested {
margin-left: 0.75rem;
}

.bx--list-box__wrapper{
max-width: 250px;
}
.bx--number__control-btn{
border: none;
}
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@
top: 0;
height: 100%;
min-height: 115%;
-webkit-box-sizing: border-box;
&.isRecurring {
min-height: 140%;
}
@@ -78,7 +79,7 @@
position: fixed;
bottom: 0;
right: 0;
top: 108px;
top: 112px;
min-width: 540px;
z-index: 499;
display: flex;
Original file line number Diff line number Diff line change
@@ -5,5 +5,7 @@
tr > td{
border: none;
padding: 2px;
vertical-align: baseline;
width: 50%;
}
}
5 changes: 4 additions & 1 deletion ui/react-components/components/ButtonGroup/ButtonGroup.jsx
Original file line number Diff line number Diff line change
@@ -11,7 +11,10 @@ const ButtonGroup = props => {

return (
<div>
<Label translationKey={"REPEATS_ON_LABEL"} defaultValue={"Repeats On"}/>
<div style={{fontSize: "12px", color: "black"}}>
<Label translationKey={"REPEATS_ON_LABEL"} defaultValue={"Repeats On"}/>
</div>

<div className={classNames(buttonGroup)}>
{[...buttonsList.keys()].map(key => {
const value = buttonsList.get(key);
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
position: fixed;
bottom: 0;
right: 0;
top: 110px;
top: 112px;
min-width: 540px;
z-index: 600;
align-items: center;
Original file line number Diff line number Diff line change
@@ -5,4 +5,5 @@
height: 15px;
font-size: 12px;
color: #da1e28;
font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}
6 changes: 3 additions & 3 deletions ui/react-components/components/Label/Label.jsx
Original file line number Diff line number Diff line change
@@ -2,13 +2,13 @@ import React from 'react';
import {FormattedMessage} from 'react-intl';
import PropTypes from 'prop-types';
import classNames from "classnames";
import {disabledLabelContainer} from './Label.module.scss'
import {carbonFont, disabledLabelContainer} from './Label.module.scss'

const Label = props => {
const {translationKey, defaultValue, forInput, disabled} = props;
return (
<label htmlFor={forInput} className={disabled ? classNames(disabledLabelContainer) : classNames('')}><b>
<FormattedMessage id={translationKey} defaultMessage={defaultValue}/></b>
<label htmlFor={forInput} className={classNames(carbonFont, disabled ? disabledLabelContainer : '')}>
<FormattedMessage id={translationKey} defaultMessage={defaultValue}/>
</label>
)
};
3 changes: 3 additions & 0 deletions ui/react-components/components/Label/Label.module.scss
Original file line number Diff line number Diff line change
@@ -2,3 +2,6 @@
cursor: not-allowed;
opacity: 0.5;
}
.carbonFont{
font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}
Original file line number Diff line number Diff line change
@@ -20,6 +20,7 @@ const styles = {
"height": "48px",
"display": "flex",
"align-items": "center",
"padding": "0 1rem"
}
}
const PatientSearch = (props) => {

0 comments on commit 1633760

Please sign in to comment.