Left pane design tweaks
This commit is contained in:
Josh Perez
GitHub
parent
1c43e7501c
commit
c857250b12
|
|
@ -1 +1 @@
|
|||
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m20.29 2.75001c.0332-.00143.0664.00405.0974.0161.0309.01205.0591.0304.0826.0539l.71.71c.0235.02352.0419.05167.0539.08265.0121.03099.0175.06414.0161.09735.0001.03155-.0061.0628-.0181.09197s-.0296.05569-.0519.07803l-9.5 9.49999c-.0331.0315-.0749.0524-.12.06l-1.31.31.31-1.31c.0076-.0451.0285-.0868.06-.12l9.5-9.49999c.0223-.02226.0489-.03991.078-.05192.0292-.01201.0605-.01815.092-.01808zm0-1.75c-.5296.00224-1.0367.21442-1.41.59l-9.5 9.48999c-.26926.2754-.4533.6226-.53 1l-.75 3.22c-.01837.0727-.0198.1487-.0042.222s.04783.1421.0942.201c.04636.059.10564.1065.17325.1389.06762.0324.14177.0489.21675.0481h.12l3.3-.76c.3774-.0767.7246-.2607 1-.53l9.49-9.49999c.186-.18574.3335-.40632.4341-.64912.1007-.24279.1525-.50305.1525-.76588s-.0518-.52308-.1525-.76588c-.1006-.24279-.2481-.46337-.4341-.64912l-.7-.7c-.1954-.19702-.4297-.35122-.6879-.4528-.2583-.10157-.5348-.148296-.8121-.1372zm-6.79 2h-6.62c-1.29253 0-2.53226.51277-3.44715 1.42579-.91489.91301-1.4302 2.15169-1.43285 3.44421v9.24999c.00264 1.2935.51763 2.5332 1.43224 3.4478.9146.9146 2.15432 1.4296 3.44776 1.4322h9.24c1.2934-.0026 2.5332-.5176 3.4478-1.4322s1.4296-2.1543 1.4322-3.4478v-6.62c.0131-.1228.0003-.2469-.0377-.3644s-.1002-.22563-.1828-.31746c-.0825-.09184-.1834-.16528-.2962-.21555s-.2348-.07625-.3583-.07625-.2455.02598-.3583.07625-.2137.12371-.2962.21555c-.0826.09183-.1448.19996-.1828.31746s-.0508.2416-.0377.3644v6.62c0 .8301-.3298 1.6263-.9168 2.2133-.5869.5869-1.3831.9167-2.2132.9167h-9.24c-.83013 0-1.62626-.3298-2.21324-.9167-.58699-.587-.91676-1.3832-.91676-2.2133v-9.24999c.00265-.82839.33358-1.62195.92028-2.20678.58671-.58483 1.38132-.91322 2.20972-.91322h6.62c.1228.01315.2469.00031.3644-.03767.1175-.03799.2256-.10026.3175-.18279.0918-.08253.1652-.18345.2155-.29622s.0763-.23485.0763-.35832c0-.12346-.026-.24555-.0763-.35831-.0503-.11277-.1237-.2137-.2155-.29622-.0919-.08253-.2-.14481-.3175-.18279s-.2416-.05082-.3644-.03768z" fill="#000"/></svg>
|
||||
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m20.6 2.6c-.2-.1-.3-.1-.4-.1s-.3 0-.3.2l-9.5 9.5s-.1.1-.1.2l-.40001 1.7 1.70001-.4c.0425 0 .0669 0 .0887-.0077.0294-.0104.0538-.0348.1113-.0923l9.5-9.5c.1-.2.1-.3.1-.4s0-.3-.1-.4zm-1.8-1c.4-.4.9-.6 1.4-.6s1 .2 1.5.6l.7.7c.8.8.8 2 0 2.8l-9.5 9.5c-.3.2-.6.4-1 .5l-3.30001.8h-.1c-.3 0-.6-.3-.5-.6l.8-3.2c0-.4.2-.7.5-1zm-12 20.3h9.2c2.6 0 4.8-2.2 4.8-4.8v-6.6c0-.5-.3-.79999-.8-.79999s-.8.39999-.8.79999v6.6c0 1.7-1.4 3.2-3.2 3.2h-9.3c-1.7 0-3.2-1.4-3.2-3.2v-9.19999c0-1.8 1.5-3.3 3.3-3.2h6.6c.5 0 .8-.3.8-.8s-.4-.8-.8-.8h-6.6c-2.7 0-4.8 2.2-4.8 4.8v9.19999c0 2.7 2.2 4.8 4.8 4.8z" fill="#000" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 741 B |
|
|
@ -2705,21 +2705,69 @@ button.ConversationDetails__action-button {
|
|||
}
|
||||
|
||||
&__compose-icon {
|
||||
$icon: '../images/icons/v2/compose-24.svg';
|
||||
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
-webkit-app-region: no-drag;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border-radius: 4px;
|
||||
border: 2px solid transparent;
|
||||
display: flex;
|
||||
height: 32px;
|
||||
justify-content: center;
|
||||
padding: 2px;
|
||||
width: 32px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg($icon, $color-gray-90);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $color-gray-15;
|
||||
}
|
||||
&:active {
|
||||
background: $color-gray-05;
|
||||
}
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg($icon, $color-gray-02);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $color-gray-75;
|
||||
}
|
||||
&:active {
|
||||
background: $color-gray-65;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include color-svg($icon, $color-ultramarine);
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
border-color: $color-ultramarine;
|
||||
}
|
||||
}
|
||||
@include dark-keyboard-mode {
|
||||
&:focus {
|
||||
border-color: $color-ultramarine-light;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
$icon: '../images/icons/v2/compose-24.svg';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
content: '';
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg($icon, $color-gray-75);
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@include color-svg($icon, $color-gray-90);
|
||||
}
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg($icon, $color-gray-15);
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@include color-svg($icon, $color-gray-02);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5244,6 +5292,12 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
}
|
||||
|
||||
.module-left-pane__dialogs {
|
||||
&:first-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.module-left-pane__empty {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
.LeftPaneSearchInput {
|
||||
position: relative;
|
||||
margin: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&__input {
|
||||
@include font-body-2;
|
||||
border: none;
|
||||
border: solid 1px transparent;
|
||||
border-radius: 8px;
|
||||
height: 28px;
|
||||
padding-left: 30px;
|
||||
|
|
@ -16,18 +16,20 @@
|
|||
width: 100%;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-gray-15;
|
||||
border: solid 1px $color-gray-15;
|
||||
background-color: $color-black-alpha-08;
|
||||
color: $color-gray-90;
|
||||
|
||||
&:placeholder {
|
||||
color: $color-gray-45;
|
||||
}
|
||||
}
|
||||
@include dark-theme {
|
||||
background-color: $color-gray-65;
|
||||
border: solid 1px $color-gray-65;
|
||||
background-color: $color-white-alpha-12;
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
&:placeholder {
|
||||
color: $color-gray-45;
|
||||
&:placeholder {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -53,7 +55,7 @@
|
|||
width: 16px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg('../images/icons/v2/search-16.svg', $color-gray-75);
|
||||
@include color-svg('../images/icons/v2/search-16.svg', $color-gray-45);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg('../images/icons/v2/search-16.svg', $color-gray-25);
|
||||
|
|
|
|||
|
|
@ -566,10 +566,14 @@ export const LeftPane: React.FC<PropsType> = ({
|
|||
},
|
||||
updateSearchTerm,
|
||||
})}
|
||||
{renderExpiredBuildDialog({ containerWidthBreakpoint: widthBreakpoint })}
|
||||
{renderRelinkDialog({ containerWidthBreakpoint: widthBreakpoint })}
|
||||
{renderNetworkStatus({ containerWidthBreakpoint: widthBreakpoint })}
|
||||
{renderUpdateDialog({ containerWidthBreakpoint: widthBreakpoint })}
|
||||
<div className="module-left-pane__dialogs">
|
||||
{renderExpiredBuildDialog({
|
||||
containerWidthBreakpoint: widthBreakpoint,
|
||||
})}
|
||||
{renderRelinkDialog({ containerWidthBreakpoint: widthBreakpoint })}
|
||||
{renderNetworkStatus({ containerWidthBreakpoint: widthBreakpoint })}
|
||||
{renderUpdateDialog({ containerWidthBreakpoint: widthBreakpoint })}
|
||||
</div>
|
||||
{preRowsNode && <React.Fragment key={0}>{preRowsNode}</React.Fragment>}
|
||||
<Measure bounds>
|
||||
{({ contentRect, measureRef }: MeasuredComponentProps) => (
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ type PropsType = {
|
|||
value: string;
|
||||
};
|
||||
|
||||
// TODO DESKTOP-3068: merge with <SearchInput />
|
||||
export const LeftPaneSearchInput = forwardRef<HTMLInputElement, PropsType>(
|
||||
(
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue