chore: Update the design of the help center portal (#6775)

This commit is contained in:
Pranav Raj S
2023-05-08 15:31:38 -07:00
committed by GitHub
parent 2b88ecdfc4
commit ce3e38df0f
20 changed files with 73 additions and 66 deletions

View File

@@ -11,7 +11,7 @@
html,
body {
font-family: $font-family;
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
height: 100%;

View File

@@ -1,8 +1,5 @@
<template>
<div
v-on-clickaway="closeSearch"
class="mx-auto max-w-md w-full relative my-4"
>
<div v-on-clickaway="closeSearch" class="max-w-2xl w-full relative my-4">
<public-search-input
v-model="searchTerm"
:search-placeholder="searchTranslations.searchPlaceholder"
@@ -10,7 +7,7 @@
/>
<div
v-if="shouldShowSearchBox"
class="absolute show-search-box w-full"
class="absolute top-16 w-full"
@mouseover="openSearch"
>
<search-suggestions
@@ -122,8 +119,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.show-search-box {
top: 4rem;
}
</style>

View File

@@ -1,17 +1,16 @@
<template>
<div
class="w-full flex items-center rounded-md border-solid h-16 bg-white px-4 py-2 text-slate-600"
class="w-full flex items-center rounded-md border-solid border-2 h-16 bg-white px-4 py-2 text-slate-600"
:class="{
'shadow border-2 border-woot-100': isFocused,
'border border-slate-50 shadow-sm': !isFocused,
'shadow border-woot-100': isFocused,
'border-slate-50 shadow-sm': !isFocused,
}"
>
<fluent-icon icon="search" />
<input
:value="value"
type="text"
class="w-full search-input focus:outline-none text-base h-full bg-white px-2 py-2
text-slate-700 placeholder-slate-500 sm:text-sm"
class="w-full focus:outline-none text-base h-full bg-white px-2 py-2 text-slate-700 placeholder-slate-500"
:placeholder="searchPlaceholder"
role="search"
@input="onChange"

View File

@@ -13,7 +13,7 @@
0 0.4rem 1.2rem rgb(0 0 0 / 7%);
--shadow-bulk-action-container:
6px 3px 22px 9px rgb(181 181 181 / 25%);
--shadow-context-menu: rgb(22 23 24 / 35%) 0px 10px 38px -10px,
--shadow-context-menu: rgb(22 23 24 / 30%) 0px 10px 38px -10px,
rgb(22 23 24 / 20%) 0px 10px 20px -15px;
--shadow-widget-builder: 0 0px 20px 5px rgb(0 0 0 / 10%);
}