diff --git a/app/client/src/components/ads/Dropdown.tsx b/app/client/src/components/ads/Dropdown.tsx index 69b67ccf11..f89e0e2bb2 100644 --- a/app/client/src/components/ads/Dropdown.tsx +++ b/app/client/src/components/ads/Dropdown.tsx @@ -116,7 +116,8 @@ const DropdownTriggerWrapper = styled.div<{ props.isOpen && !props.disabled ? ` box-sizing: border-box; - border: 1px solid #80bdff; + border: 1px solid ${Colors.GREEN_1}; + box-shadow: 0px 0px 0px 2px ${Colors.GREEN_2}; ` : null}; .${Classes.TEXT} { @@ -205,6 +206,35 @@ export const DropdownWrapper = styled.div<{ background-color: ${(props) => props.theme.colors.dropdown.menu.bg}; border: 1px solid ${(props) => props.theme.colors.dropdown.menu.border}; padding: ${(props) => props.theme.spaces[3]}px 0; + .dropdown-search { + margin: 4px 12px 8px; + width: calc(100% - 24px); + + input { + height: 36px; + font-size: 14px !important; + color: ${Colors.GREY_10} !important; + padding-left: 36px !important; + + &:focus { + border: 1.2px solid ${Colors.GREEN_1}; + box-shadow: 0px 0px 0px 2px ${Colors.GREEN_2}; + } + } + + .bp3-icon-search { + width: 36px; + height: 36px; + margin: 0px; + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 14px; + } + } + } `; const SearchComponentWrapper = styled.div` @@ -231,9 +261,8 @@ const OptionWrapper = styled.div<{ cursor: pointer; display: flex; align-items: center; - - background-color: ${(props) => - props.selected ? props.theme.colors.propertyPane.dropdownSelectBg : null}; + min-height: 36px; + background-color: ${(props) => (props.selected ? Colors.GREEN_3 : null)}; &&& svg { rect { @@ -261,7 +290,7 @@ const OptionWrapper = styled.div<{ } &:hover { - background-color: ${(props) => props.theme.colors.dropdown.menu.hover}; + background-color: ${Colors.GREEN_3}; &&& svg { rect { @@ -312,7 +341,9 @@ const StyledSubText = styled(Text)<{ `; const LeftIconWrapper = styled.span` - margin-right: 15px; + font-size: 20px; + line-height: 19px; + margin-right: 10px; height: 100%; position: relative; top: 1px; diff --git a/app/client/src/components/designSystems/appsmith/SearchComponent.tsx b/app/client/src/components/designSystems/appsmith/SearchComponent.tsx index 19e929994b..96be45ef80 100644 --- a/app/client/src/components/designSystems/appsmith/SearchComponent.tsx +++ b/app/client/src/components/designSystems/appsmith/SearchComponent.tsx @@ -98,7 +98,6 @@ class SearchComponent extends React.Component< this.setState({ localValue: search }); this.onDebouncedSearch(search); }; - clearSearch = () => { this.setState({ localValue: "" }); this.onDebouncedSearch(""); diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx index 90b6a56565..5878088894 100644 --- a/app/client/src/constants/Colors.tsx +++ b/app/client/src/constants/Colors.tsx @@ -146,6 +146,10 @@ export const Colors = { PRIMARY_ORANGE: "#F86A2B", MIRAGE: "#182026", + + GREEN_1: "#50AF6C", + GREEN_2: "#D5EFE3", + GREEN_3: "#ECF9F3", MASALA: "#43403D", }; export type Color = typeof Colors[keyof typeof Colors]; diff --git a/app/client/src/widgets/InputWidget/component/CurrencyCodeDropdown.tsx b/app/client/src/widgets/InputWidget/component/CurrencyCodeDropdown.tsx index 53ab9d6665..4c5202a3b1 100644 --- a/app/client/src/widgets/InputWidget/component/CurrencyCodeDropdown.tsx +++ b/app/client/src/widgets/InputWidget/component/CurrencyCodeDropdown.tsx @@ -4,6 +4,7 @@ import Dropdown, { DropdownOption } from "components/ads/Dropdown"; import { CurrencyTypeOptions, CurrencyOptionProps } from "constants/Currency"; import Icon, { IconSize } from "components/ads/Icon"; import { countryToFlag } from "./utilities"; +import { Colors } from "constants/Colors"; const DropdownTriggerIconWrapper = styled.div` height: 19px; @@ -19,11 +20,24 @@ const DropdownTriggerIconWrapper = styled.div` > * { margin-left: 5px; } + + .dropdown { + svg { + width: 14px; + height: 14px; + + path { + fill: ${Colors.GREY_10} !important; + } + } + } `; const CurrencyIconWrapper = styled.span` height: 100%; - padding: 6px 4px 6px 12px; + display: flex; + align-items: center; + padding: 0px 4px 0px 12px; position: absolute; left: 0; z-index: 16; @@ -88,18 +102,18 @@ export default function CurrencyTypeDropdown(props: CurrencyDropdownProps) { const dropdownTriggerIcon = ( {selectedCurrency} - + ); return ( ` - padding: 9px 0px 9px 12px; - width: 85px; - min-width: 85px; + padding: 7px; + width: 92px; + min-width: 92px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; - height: 32px; - line-height: ${(props) => (props.disabled ? 32 : 18)}px; + height: 36px; + line-height: ${(props) => (props.disabled ? 36 : 18)}px; letter-spacing: -0.24px; color: #090707; position: ${(props) => props.disabled && "absolute"}; - .code { - margin-right: 4px; - pointer-events: none; - } - .icon-dropdown { - opacity: ${(props) => props.disabled && "0.6"}; - display: flex; - width: 30px; - justify-content: space-between; + + .dropdown { + svg { + width: 14px; + height: 14px; + + path { + fill: ${Colors.GREY_10} !important; + } + } } `; +const FlagWrapper = styled.span` + font-size: 20px; + line-height: 19px; +`; + const getISDCodeOptions = (): Array => { return ISDCodeOptions.map((item: ISDCodeProps) => { return { @@ -80,11 +87,11 @@ export default function ISDCodeDropdown(props: ISDCodeDropdownProps) { className="t--input-country-code-change" disabled={props.disabled} > -
+ {selectedCountry.value && countryToFlag(selectedCountry.value)} - -
+
{selectedCountry.id && selectedCountry.id}
+ ); if (props.disabled) { @@ -93,12 +100,12 @@ export default function ISDCodeDropdown(props: ISDCodeDropdownProps) { return ( ( .currency-type-filter, .country-type-filter { width: fit-content; - height: 32px; + height: 36px; position: absolute; display: inline-block; left: 0; @@ -94,8 +90,12 @@ const InputComponentWrapper = styled((props) => ( fill: ${(props) => props.theme.colors.icon?.hover}; } } + &:hover { + border: 1px solid ${Colors.GREY_5} !important; + } } .${Classes.INPUT} { + min-height: 36px; ${(props) => props.inputType === InputTypes.CURRENCY && props.allowCurrencyChange && @@ -107,11 +107,13 @@ const InputComponentWrapper = styled((props) => ( ` padding-left: 35px;`}; ${(props) => - props.inputType === InputTypes.PHONE_NUMBER && `padding-left: 85px;`}; + props.inputType === InputTypes.PHONE_NUMBER && + `padding-left: 85px; + `}; box-shadow: none; border: 1px solid; border-color: ${({ hasError }) => - hasError ? IntentColors.danger : Colors.GEYSER_LIGHT}; + hasError ? `${Colors.DANGER_SOLID} !important;` : `${Colors.GREY_3};`} border-radius: 0; height: ${(props) => (props.multiline === "true" ? "100%" : "inherit")}; width: 100%; @@ -120,22 +122,56 @@ const InputComponentWrapper = styled((props) => ( ` border-top-right-radius: 0px; border-bottom-right-radius: 0px; - border-right-width: 0px; + ${props.hasError ? "" : "border-right-width: 0px;"} + `} + ${(props) => + props.inputType === "PASSWORD" && + ` + & + .bp3-input-action { + height: 36px; + width: 36px; + cursor: pointer; + padding: 1px; + .password-input { + color: ${Colors.GREY_6}; + justify-content: center; + height: 100%; + svg { + width: 20px; + height: 20px; + } + &:hover { + background-color: ${Colors.GREY_2}; + color: ${Colors.GREY_10}; + } + } + } `} transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; &:active { border-color: ${({ hasError }) => - hasError ? IntentColors.danger : Colors.HIT_GRAY}; + hasError ? Colors.DANGER_SOLID : Colors.HIT_GRAY}; + } + &:hover { + border-left: 1px solid ${Colors.GREY_5}; + border-right: 1px solid ${Colors.GREY_5}; + border-color: ${Colors.GREY_5}; } &:focus { border-color: ${({ hasError }) => - hasError ? IntentColors.danger : Colors.MYSTIC}; + hasError ? Colors.DANGER_SOLID : Colors.MYSTIC}; &:focus { - border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])}; - border-color: #80bdff; outline: 0; - box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25); + border: 1px solid ${Colors.GREEN_1}; + box-shadow: 0px 0px 0px 2px ${Colors.GREEN_2} !important; + } + } + &:disabled { + background-color: ${Colors.GREY_1}; + border: 1.2px solid ${Colors.GREY_3}; + & + .bp3-input-action { + pointer-events: none; } } } @@ -146,6 +182,12 @@ const InputComponentWrapper = styled((props) => ( background-color: transparent; color: #5c7080; } + &.${Classes.DISABLED} + .bp3-button-group.bp3-vertical { + pointer-events: none; + button { + background: ${Colors.GREY_1}; + } + } } .${Classes.CONTROL_GROUP} { justify-content: flex-start; @@ -178,17 +220,46 @@ const StyledNumericInput = styled(NumericInput)` &:first-child:not(input) { position: static; background: ${(props) => - props.disabled ? Colors.INPUT_DISABLED : "#fff"}; - color: ${(props) => - props.disabled ? Colors.INPUT_TEXT_DISABLED : "#000"}; - border: 1px solid #e7e7e7; + props.disabled ? Colors.GREY_1 : Colors.WHITE}; + border: 1.2px solid ${Colors.GREY_3}; border-right: 0; } input:not(:first-child) { padding-left: 5px; - border-left: 0; + border-left: 1px solid transparent; z-index: 16; line-height: 16px; + + &:hover:not(:focus) { + border-left: 1px solid ${Colors.GREY_5}; + } + } + } + } + &&&& .bp3-button-group.bp3-vertical { + border: 1.2px solid ${Colors.GREY_3}; + border-left: none; + button { + background: ${Colors.WHITE}; + box-shadow: none; + min-width: 24px; + width: 24px; + border-radius: 0; + &:hover { + background: ${Colors.GREY_2}; + span { + color: ${Colors.GREY_10}; + } + } + &:focus { + border: 1px solid ${Colors.GREEN_1}; + box-shadow: 0px 0px 0px 2px ${Colors.GREEN_2}; + } + span { + color: ${Colors.GREY_6}; + svg { + width: 14px; + } } } } @@ -437,8 +508,9 @@ class InputComponent extends React.Component< placeholder={this.props.placeholder} rightElement={ this.props.inputType === "PASSWORD" ? ( -