feat: remove "optional" tag (#87)

* feat: remove "optional" tag from validations

* fix: required tag color in dark mode

Author: mpodlasin

src/components/__tests__/Validations.spec.tsx

@@ -18,7 +18,7 @@ describe('Validations component', () => {
     test('should exclude deprecated from general validations', () => {
       const wrapper = shallow(<Validations required={false} validations={validations} />).find(Popover);
 
-      expect(shallow(wrapper.prop('target') as React.ReactElement)).toHaveText('optional+2');
+      expect(shallow(wrapper.prop('target') as React.ReactElement)).toHaveText('+2');
       expect(shallow(wrapper.prop('content') as React.ReactElement)).toHaveText('format:"email"minLength:2');
     });
 

src/components/shared/Validations.tsx

@@ -1,7 +1,6 @@
 import { safeStringify } from '@stoplight/json';
 import { Dictionary } from '@stoplight/types';
 import { Popover } from '@stoplight/ui-kit';
-import cn from 'classnames';
 import * as React from 'react';
 import { ViewModeContext } from '../JsonSchemaViewer';
 
@@ -18,9 +17,9 @@ export const Validations: React.FunctionComponent<IValidations> = ({
   const validationCount = Object.keys(validations).length;
 
   const requiredElem = (
-    <div className={cn('ml-2', required ? 'font-medium' : 'text-darken-7 dark:text-lighten-6')}>
-      {required ? 'required' : 'optional'}
-      {validationCount ? `+${validationCount}` : ''}
+    <div>
+      {required && <span className="ml-2 text-orange-7 dark:text-orange-6">required</span>}
+      {validationCount ? <span className="ml-1 text-darken-7 dark:text-lighten-6">+{validationCount}</span> : null}
     </div>
   );