UI Guidelines

User Interface (UI) guidelines for AppNest serve as a framework to ensure a consistent and cohesive design, enhancing both the usability and aesthetics of the UI.

By constructing a clear layout, typography, color schemes, navigation, and other design elements, UI guidelines enable developers to create intuitive, user-friendly interfaces that align with the brand identity.

Consistent adherence to these guidelines helps provide a smooth app submission process in terms of UI.

Note: It is mandatory to utilize Twigs to construct the UI.

Fonts

• Configure the fonts by adding the tag for the font specifications on the index.html file, instead of adding the @import in the index.css file.
• Make sure to set the font family on the ThemeProvider in the app.js file as well

<ThemeProvider theme={{
    fonts: {
        body: "'DM sans', sans-serif"
    }
}}>
    {child}
</ThemeProvider>

Colors

• Configure the colors of your app on the ThemeProvider of Twigs
• Colors used in the app need to align with the SurveySparrow UI theme

<ThemeProvider
 theme={{
   colors: {
     primary: '#4A9CA6'
   }
 }}
>
 <App>
</ThemeProvider>

Styles

• Twigs provides a CSS property on most of its components to add custom CSS.
• It is strictly restricted to not use any of Twigs Components’ class names to override the styles as the class names get changed on production.

<Button
 css={{
   backgroundColor: '$primary100'
 }}>
 Submit
</Button>

Alert Messages

• Use Twigs’ built-in Toast component to display alert messages and notifications.
• Make sure to pass customized and understandable error messages and not the actual API error messages.
• The notifications should be short and precise and shouldn’t be confusing to the users.

function App () {
 return (
   <>
     <Toastr duration={10000} />
     <App />
   </>
 )
}

Icons

• Twigs comes with a react icons library called twigs-react-icons which provides all the necessary icons that align with SurveySparrow’s theme.
• These icons are pre-built and optimized, which simplifies the process of embedding an icon with easy customizations such as size.

import { AddColumnIcon } from '@sparrowengg/twigs-react-icons';
const App = () => {
 return <AddColumnIcon />;
};

External Packages

• When installing any NPM packages, make sure that it is up-to-date and that they can be used on the client side.
• Avoid packages that cause an issue when running on the client side as the configuration for your react application might not support the package.

Embed Third Party Applications

• Your react application built using SSDK CLI is rendered on an Iframe.
• If you wish to integrate a third-party application to get rendered on this Iframe, then place the embed code given by the third-party application in the body tag on the index.html page.
• Ensure that the embed code is a valid secure one provided by the third-party application.