chore: update resource description in extension

frontend/extension/src/components/CreateShortcutsButton.tsx

@@ -150,7 +150,7 @@ const CreateShortcutsButton = () => {
               <Input
                 className="grow"
                 type="text"
-                placeholder="https://github.com/boojack/slash"
+                placeholder="e.g., https://github.com/boojack/slash"
                 value={state.link}
                 onChange={handleLinkInputChange}
               />

frontend/extension/src/components/Logo.tsx

@@ -6,7 +6,7 @@ interface Props {
 }
 
 const Logo = ({ className }: Props) => {
-  return <img className={classNames(className)} src={LogoBase64} alt="" />;
+  return <img className={classNames("rounded-full", className)} src={LogoBase64} alt="" />;
 };
 
 export default Logo;

frontend/extension/src/options.tsx

@@ -79,7 +79,7 @@ const IndexOptions = () => {
         </a>
       </div>
 
-      <div className="w-full max-w-lg mx-auto flex flex-col justify-start items-start mt-12">
+      <div className="w-full max-w-lg mx-auto flex flex-col justify-start items-start py-12">
         <h2 className="flex flex-row justify-start items-center mb-6 text-2xl dark:text-gray-400">
           <Logo className="w-10 h-auto mr-2" />
           <span>Slash</span>
@@ -90,7 +90,7 @@ const IndexOptions = () => {
         <div className="w-full flex flex-col justify-start items-start">
           <div className="w-full flex flex-col justify-start items-start mb-4">
             <div className="mb-2 text-base w-full flex flex-row justify-between items-center">
-              <span className="dark:text-gray-400">Domain</span>
+              <span className="dark:text-gray-400">Instance URL</span>
               {domain !== "" && (
                 <a
                   className="text-sm flex flex-row justify-start items-center dark:text-gray-400 hover:underline hover:text-blue-600"
@@ -106,7 +106,7 @@ const IndexOptions = () => {
               <Input
                 className="w-full"
                 type="text"
-                placeholder="The domain of your Slash instance"
+                placeholder="The url of your Slash instance. e.g., https://slash.example.com"
                 value={settingState.domain}
                 onChange={(e) => setPartialSettingState({ domain: e.target.value })}
               />
@@ -119,7 +119,7 @@ const IndexOptions = () => {
               <Input
                 className="w-full"
                 type="text"
-                placeholder="The access token of your Slash instance"
+                placeholder="An available access token of your account."
                 value={settingState.accessToken}
                 onChange={(e) => setPartialSettingState({ accessToken: e.target.value })}
               />
@@ -171,7 +171,7 @@ const Options = () => {
   return (
     <CssVarsProvider>
       <IndexOptions />
-      <Toaster position="top-right" />
+      <Toaster position="top-center" />
     </CssVarsProvider>
   );
 };

frontend/extension/src/popup.tsx

@@ -30,7 +30,7 @@ const IndexPopup = () => {
     <div className="w-full min-w-[512px] px-4 pt-4">
       <div className="w-full flex flex-row justify-between items-center">
         <div className="flex flex-row justify-start items-center dark:text-gray-400">
-          <Logo className="w-6 h-auto mr-2" />
+          <Logo className="w-6 h-auto mr-1" />
           <span className="">Slash</span>
           {isInitialized && (
             <>
@@ -81,10 +81,10 @@ const IndexPopup = () => {
         ) : (
           <div className="w-full flex flex-col justify-start items-center">
             <Icon.Cookie strokeWidth={1} className="w-20 h-auto mb-4 text-gray-400" />
-            <p className="dark:text-gray-400">Please set your domain and access token first.</p>
+            <p className="dark:text-gray-400">Please set your instance URL and access token first.</p>
             <div className="w-full flex flex-row justify-center items-center py-4">
               <Button size="sm" color="primary" onClick={handleSettingButtonClick}>
-                <Icon.Settings className="w-5 h-auto mr-1" /> Setting
+                <Icon.Settings className="w-5 h-auto mr-1" /> Go to Setting
               </Button>
               <span className="mx-2 dark:text-gray-400">Or</span>
               <Button size="sm" variant="outlined" color="neutral" onClick={handleRefreshButtonClick}>
@@ -102,7 +102,7 @@ const Popup = () => {
   return (
     <CssVarsProvider>
       <IndexPopup />
-      <Toaster position="top-right" />
+      <Toaster position="top-center" />
     </CssVarsProvider>
   );
 };